Позиционирование и координаты CSS

Слои и координаты в CSS играют большую роль, т.к. это просто и удобно.
Давайте рассмотрим простой пример наложения слоя на слой.
Слой 1 выше Слоя 2
Сделать слой выше можно 2-мя способами - изменить его относительно координаты Z либо в сторону + либо в - Но учтите минус работает не во всех браузерах, и часто он просто делает объект невидимым.
Слой 1 выше
Слой 2 ниже

А достигается это очень интересным и необходимым свойством position, которое устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
В данном случае у свойства position значение relative, что означает, что положение элемента устанавливается относительно родителя, иными словами, контейнера, в который вложен элемент. В нашем случае этот контейнер является тегом <div>. Если родительский элемент явно не задан, то в качестве него выступает окно браузера. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от родителя, в зависимости от применяемого параметра.
Мы не только сдвинули Слой 2 по оси Z, но и выставили left:5; и top:-15;, что означает сместить относительно левого края на 5 едениц, а относительно верха на -15, что и означало поднять на 15 пикселей. Единицы измерения могут быть любыми, выбирать Вам. Что же конкретно происходит в коде Вы можете увидеть посмотрев HTML вид этой страницы.

Оцени публикацию:
  • 6,30
Оценили человек: 6

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • Выкладывайте нормальный код, как на нормальных сайтах!
    03 января 2014, 09:03 коммент полезен : 0 # Senjor_nekit
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2018 YaPro.Ru

Главная » Веб-мастеру » CSS »