А вот если у Html тега прописано значение для position — relative, absolute или fixed, то такие элементы будут автоматически располагаться выше (ближе к нашим глазам) по отношению ко всем статическим элементам веб документа. Спозиционированные теги ведь можно двигать с помощью , а значит они должны быть априори расположены выше (ближе к нам) относительно всей остальной статики на веб-странице.
Но тем не менее, среди всех статичных элементов лежащих на нулевой отметке оси Z должен существовать какой-то порядок отображения. И он существует, подчиняясь правилу — элемент находящийся ниже в Html коде документа (веб страницы) будет расположен ближе к нашим глазам. Т.о. при наезде границ статичных элементов друг на друга, сверху будет расположен тот , который прописан в коде веб-страницы ниже.
Две другие оси X и Y имеют начальную точку отсчета в правом верхнем углу экрана (для тех, кто пишет слева направо) или в левом верхнем углу (для тех, кто пишет набором — арабы, например). Естественно, что точкой отсчета на оси Z является ноль. Именно в этой точке и располагаются все статичные элементы Html кода (для которых значение position не прописано, а значит браузер его интерпретирует как position: static).
Итак, для всех Html элементов, которые были насильно спозиционированы (для них мы специально прописали CSS правило position со значением relative, absolute или fixed), у нас появляется возможность управлять расположение этих элементов друг относительно друга на оси Z. Эта ось направлена от экрана компьютера к вашим глазам (или глазам посетителей сайтов).
Z-index в CSS — позиционирование по оси Z
Прежде чем начинать знакомиться с материалом этой статьи обязательно окунитесь в основы позиционирования элементов с помощью CSS правила , иначе могут возникнуть проблемы с понимаем. Ну, а в конце этой небольшой публикации я еще до кучи приведу примеры использования довольно простого CSS правила cursor, что может пригодиться для повышения юзабилити веб сайтов с динамическими интерфейсами.
Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте Z-index и CSS правило Cursor Рубрика: Здравствуйте, уважаемые читатели блога . Сегодня мы продолжим тему позиционирования элементов с помощью правил в . На очереди у нас правило z-index, которое позволяет задавать порядок расположения элементов Html кода, для которых значение правил отлично от умолчательного значения (position: static).
Z-index и CSS правило Cursor | KtoNaNovenkogo.ru - создание, продвижение и заработок на сайте
Комментариев нет:
Отправить комментарий