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

Автор: Aport Вторник, Январь 27th, 2015 Нет комментариев

Рубрика: Разное

Слои и координаты в 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 вид этой страницы.

 

Источник: yapro.ru

 

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты