Не пропусти
Главная » Интернет новичку » Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши, создание, продвижение и заработок на сайте

Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши, создание, продвижение и заработок на сайте

>

Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши

Здравствуйте, уважаемые читатели блога Сегодня мы продолжим тему позиционирования Html тегов с помощью языка CSS в современной верстке сайтов. На очереди у нас правило z-index, которое позволяет задавать порядок расположения тэгов, для которых значение position отлично от умолчательного (static).

Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши, создание, продвижение и заработок на сайте

Прежде, чем начинать знакомиться с материалом этой статьи, обязательно окунитесь в основы позиционирования элементов с помощью position, иначе могут возникнуть проблемы с понимаем. Ну, а в конце этой небольшой публикации я еще до кучи приведу примеры использования довольно простого CSS правила cursor, что может пригодиться для повышения юзабилити веб сайтов с динамическими интерфейсами.

Z-index в CSS — позиционирование по оси Z

Итак, для всех элементов, которые были насильно спозиционированы (для них мы специально прописали position со значением relative, absolute или fixed), у нас появляется возможность управлять расположением этих элементов друг относительно друга на оси Z. Эта ось направлена от экрана компьютера к вашим глазам (или глазам посетителей сайтов).

Две другие оси, X и Y, имеют начальную точку отсчета в правом верхнем углу экрана (для тех, кто пишет слева направо) или в левом верхнем углу (для тех, кто пишет набором — арабы, например). Естественно, что точкой отсчета на оси Z является ноль. Именно в ней и располагаются все статичные элементы Html кода (для которых значение position не прописано, а значит браузер его интерпретирует как static).



Но тем не менее, среди всех статичных элементов лежащих на нулевой отметке оси Z, должен существовать какой-то порядок отображения. И он существует, подчиняясь правилу — тег, находящийся ниже в коде документа (веб страницы), будет расположен ближе к нашим глазам. Т.о. при наезде границ статичных элементов друг на друга, сверху будет расположен тот, который прописан в коде веб-страницы ниже.

А вот если у тега прописано значение для position — relative, absolute или fixed, то они будут автоматически располагаться выше (ближе к нашим глазам) по отношению ко всем статическим. Спозиционированные тэги ведь можно двигать с помощью CSS правил Left, right, top и bottom, а значит они должны быть априори расположены выше (ближе к нам) относительно всей остальной статики на веб-странице.

Т.о. все спозиционированные элементы на оси Z автоматически сдвигаются вперед относительно всех статичных. Относительно же друг друга они подчиняются все тому же правилу — элемент находящийся ниже в коде веб страницы будет расположен ближе к нашим глазам. Но положением на оси Z у таких тегов (с position — relative, absolute или fixed) можно будет играться по своему разумению с помощью правила z-index.

Для статичных же тэгов (с «position: static» используемым по умолчанию) правило z-index работать не будет. В этом заключается его специфика. По умолчанию оно имеет значение Auto или тоже самое, что ноль (действие которого мы подробно рассмотрели чуть выше):



Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши, создание, продвижение и заработок на сайте

Но также в качестве значения для z-index можно использовать положительные и отрицательные цифры.

Давайте все рассмотрим его работу на простом примере. Пусть у нас имеется один большой контейнер Div с текстом (контентом) и относительным позиционированием (position:relative), а внутри него заключены два других Div с фиксированным размером и абсолютным позиционированием (position:absolute относительно левого верхнего угла внешнего контейнера):

Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши, создание, продвижение и заработок на сайте

Внутренним контейнерам я задал сдвиги и фоновые цвета для пущей наглядности. Почему на оси Z эти элементы расположились именно в таком порядке? Очевидно, что подчиняясь умолчательному правилу — чем ниже тег в коде, тем ближе он к нашим глазам. Ну, а теперь давайте применим, наконец-то, правило z-index и посмотрим, что из этого получится.

По умолчанию оно имеет значение ноль , поэтому прописав для красного блока z-index:1, мы выдвинем его на первый план:

Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши, создание, продвижение и заработок на сайте

Все довольно просто и понятно. Единица обозначает число на оси Z (первый уровень после нуля). Если мы теперь захотим, чтобы фиолетовый блок опять выдвинулся вперед красного, то можно будет ему прописать z-index:2 и мы получим картину аналогичную той, что отображена на первом скриншоте. Получается, что выше всех (ближе к нашим глазам) будет расположен тот тэг, у которого больше значение этого CSS правила.



Если оно окажется у спозиционированных элементов одинаковым, то выше будет стоять тот элемент, который в коде веб-страницы расположен ниже. И как я уже упоминал чуть выше, значение для него может быть использовано со знаком минус (быть отрицательным). Давайте пропишем z-index:-1 для красного блока и посмотрим что из этого получится:

Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши, создание, продвижение и заработок на сайте

Думаю, что комментарии здесь излишни. Таким образом z-index позволяет перемещать элементы кода по оси Z, чтобы он был виден или же, наоборот, не виден. Но все это великолепие будет работать только для спозиционирванных тегов, а для статичных (с position: static) уже работать не будет. Это нужно помнить и учитывать.

Cursor — изменяем внешний вид курсора мыши

Нам осталось только разобрать еще более простое в понимании правило Cursor. В операционных системах предусмотрен целый набор возможных изображений курсора мыши (рука, различные стрелки и т.п. вещи). Все это направлено на удобство работы и понимания того, что происходит или что можно проделать с теми или иными составляющими дизайна операционки.

Т.к. браузер тоже является частью операционной системы, то все эти виды курсоров будут появляться и при вашей работе с веб-страницами. По умолчанию для правила Cursor используется значение Auto и в этом случае браузер сам решает, что показать.

Например, в тексте веб-страницы будет показываться привычный текстовый курсорчик, на пустых местах — стрелочка, а на ссылках — рука или ее аналог (как настроено в вашей операционке). Но с помощью Cursor вы вольны для любого тега прописать свое значение и при наведении на него курсора мыши последний изменит свой вид на то, что вы зададите.



Если опираться на спецификацию CSS с кладбища стандартов всемирной паутины WWW, то значений у Cursor может быть очень много:

Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши, создание, продвижение и заработок на сайте

Как я уже говорил, по умолчанию для него используется Auto. Ну, а все остальные значения для Cursor вы можете увидеть на приведенном ниже примере (подводите курсор мыши к разным строкам и смотрите как изменится его вид:

В нижней части расположены значения для Cursor, которые в некоторых браузерах могут игнорироваться. Обычно проблемы возникают в Опере, реже в Mozilla Firefox и браузерах на движке Webkit — Google Chrome, Яндекс браузере, а также Сафари для Виндовс), ну и вообще не возникает в Интернет Эксплорере.

Естественно, что виды курсоров будут зависеть и от используемой вами темы ОС или же наборов курсоров в ней. Стоит отдельно отметить вариант, где вы сами можете указать путь до нужной вам картинки, которая обычно имеет расширение .cur, а через запятую нужно будет указать одно из обычных значений, например, так:

Есть много программ, которые умеют рисовать курсоры. Но имеет смысл активно применять CSS правило Cursor только тогда, когда у вас будут на сайте какие-то динамические интерфейсы. На обычных страницах лучше не злоупотреблять их разнообразием, дабы не вводить пользователя в прострацию.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Подборки по теме:

Комментарии и отзывы

Спасибо, статья очень понадобится в дальнейшем



Здравствуйте, Дмитрий. Я являюсь постоянным читателем этого блога. У вас интересный дизайн. Подскажите как вы реализовали отсутствие вывода категорий в шапке сайта

Я сейчас изучаю z-index и нашёл интересный способ применения на http://tutorialzine.com/2013/08/slideout-footer-css/ (извините за ссылку), но в футере прописана фиксированная высота.

Как сделать так чтобы высота была динамичной?

Планирую в футер добавить сайдбар из-за этого хочу настроить динамичную высоту меняющуюся от наполнения сайдбара.

Спасибо за разъяснения!

* Нажимая на кнопку «Добавить комментарий» или «Подписаться» Вы соглашаетесь с политикой конфиденциальности.

О admin

x

Check Also

Презентация обновленной партнерской программы МегаКонкурс, создание, продвижение и заработок на сайте

> Презентация обновленной партнерской программы Binpartner.com + МегаКонкурс Здравствуйте, уважаемые читатели блога Хочу предложить вашему вниманию пресс-релиз обновленной партнерки Binpartner.com. Но, прежде всего, остановлюсь на МЕГАКОНКУРСЕ, который стартовал параллельно с ...

Предновогодняя акция от Профит Партнера, создание, продвижение и заработок на сайте

> Предновогодняя акция от Профит Партнера Здравствуйте, уважаемые читатели блога Ну, вот и дождались — Профит Партнер проводит очередную акцию (по моему, уже третью за этот год). Догадайтесь, призы от ...

Пошаговый план продвижения коммерческих сайтов, создание, продвижение и заработок на сайте

> Пошаговый план продвижения коммерческих сайтов Здравствуйте, уважаемые читатели блога Сегодня я не буду говорить непосредственно о создании и продвижении сайта, а хочу начать разговор о том, какие вопросы нужно ...

Почта (новый Hotmail), создание, продвижение и заработок на сайте

> Почта Outlook.com (новый Hotmail) Здравствуйте, уважаемые читатели блога У компании Майкрософт имеет место быть привычка смены названия их онлайн-сервисов. Поисковик Бинг не раз менял свое имя, да и облачное ...

Почему так важна быстрая индексация страниц сайта в Яндексе и как ее можно ускорить через, создание, продвижение и заработок на сайте

> Почему так важна быстрая индексация страниц сайта в Яндексе и как ее можно ускорить через GetBot.guru Здравствуйте, уважаемые читатели блога Сегодня речь пойдет про онлайн-сервис, позволяющий быстро отправлять в ...

Почему не загружается и не работает социальная сеть — Одноклассники, а так же как ее открыть, если она заблокирована

> Почему не загружается и не работает социальная сеть «Одноклассники», а так же как ее открыть, если она заблокирована С каждым годом количество пользователей в социальной сети «Одноклассники» становится все ...

Почему не загружается ВК и браузер не заходит во Вконтакте, создание, продвижение и заработок на сайте

> Почему не загружается ВК и браузер не заходит во Вконтакте Здравствуйте, уважаемые читатели блога Практически каждый житель отечественных стран в возрасте от 14 до 45 лет имеет свой аккаунт ...

Почему выгодно работать с партнерской программой Studybay, создание, продвижение и заработок на сайте

> Почему выгодно работать с партнерской программой Studybay Здравствуйте, уважаемые читатели блога StudyBay — это онлайн биржа для заказа студенческих работ под бурж трафик со своей партнерcкой программой, работающей по ...

Послушай Платона и сделай правильно, создание, продвижение и заработок на сайте

> Послушай Платона и сделай правильно §1 Платон всегда прав §2 Если Платон не прав, смотри §1 Здравствуйте, уважаемые читатели блога Сегодня поговорим о новой страшилке Яндекса — Минусинске, и ...

Пользовательское соглашение, создание, продвижение и заработок на сайте

> Пользовательское соглашение KtoNaNovenkogo.ru Пользовательское соглашение сайта KtoNaNovenkogo.ru Итак, Уважаемые посетители, давайте с вами договоримся об условиях пользования ресурсом Использование материалов данного сайта регулируется положением законодательства РФ (и международными нормами) ...

Получение бэклинков с профилей трастовых сайтов и со страниц сервисов для проведения SEO анализа, создание, продвижение и заработок на сайте

> Получение бэклинков с профилей трастовых сайтов и со страниц сервисов для проведения SEO анализа Здравствуйте, уважаемые читатели блога Что-то меня последнее время прорвало на статьи по поводу получения этих ...

Политика конфиденциальности, создание, продвижение и заработок на сайте

> Политика конфиденциальности Политика конфиденциальности сайта KtoNaNovenkogo.ru Для показа объявлений на блоге KtoNaNovenkogo.ru используются услуги сторонних рекламных компаний. Эти компании могут использовать информацию о Ваших посещениях этого блога и других ...

Покупка домена (доменного имени) на примере регистратора Reghouse, создание, продвижение и заработок на сайте

> Покупка домена (доменного имени) на примере регистратора Reghouse Здравствуйте, уважаемые читатели блога Это уже третья статья из серии, посвященной выбору хостинга и регистрации доменного имени для вашего будущего сайта ...

Пока другие требуют у вас денег

> Пока другие требуют у вас денег, Wizard.Sape — дарят их вам! Здравствуйте, уважаемые читатели блога Сервис автоматического продвижения сайтов Wizard.Sape делает очень выгодное предложение своим клиентам: Пополните баланс на ...

Поисковые системы России и лидирующие поисковики интернета, создание, продвижение и заработок на сайте

> Поисковые системы России и лидирующие поисковики интернета Здравствуйте, уважаемые читатели блога Когда интернет был еще совсем молодой, то его немногочисленным пользователям было достаточно собственных закладок. Однако, как вы помните, ...

Поисковая система от Майла

> Поисковая система от Майла — история развития и особенности продвижения сайта под поисковик майл.ру Здравствуйте, уважаемые читатели блога Продолжаем обзор поисковых систем рунета, который мы начали, естественно, с Google. ...

Поисковая система Webalta, которую ненавидит весь рунет

> Поисковая система Webalta, которую ненавидит весь рунет — как удалить Вебальту с компьютера Здравствуйте, уважаемые читатели блога За последние полтора года я написал серию статей с обзорами самых известных ...

Поисковая система Bing и почта Outlook (бывший Hotmail), создание, продвижение и заработок на сайте

> Поисковая система Bing и почта Outlook (бывший Hotmail) Здравствуйте, уважаемые читатели блога Сегодня я хочу поговорить про не очень популярные в рунете поисковую систему Bing и почтовый сервис Хотмайл. ...

Поиск по сайту и интернет-магазину от Яндекса, создание, продвижение и заработок на сайте

> Поиск по сайту и интернет-магазину от Яндекса Здравствуйте, уважаемые читатели блога Сегодня хочу в деталях рассказать о том, как установить и настроить поиск по сайту с помощью Яндекса. В ...

Поиск по картинке, фото или любому загруженному изображению в Гугле и Яндексе

> Поиск по картинке, фото или любому загруженному изображению в Гугле и Яндексе — как это работает Здравствуйте, уважаемые читатели блога Еще совсем недавно поисковики могли искать только по словам. ...

Поиск по картинке, фото или любому загруженному изображению в бесплатном сервисе

> Поиск по картинке, фото или любому загруженному изображению в бесплатном сервисе picid.club — как это работает? Здравствуйте, уважаемые читатели блога Эта статья посвящена пользователям фотобанков. Фотобанки (они же микростоки) ...

Рейтинг@Mail.ru