Наложение и порядок слоёв
На веб-странице расположены три изображения игральных карт (рис. 3.51). Пока они лежат рядом, их порядок значения не имеет, но если применить к ним позиционирование и сместить изображения так, чтобы они накладывались друг на друга, одна карта будет находиться выше другой (рис. 3.52).
Рис. 3.51. Карты рядом друг с другом
Рис. 3.52. Карты одна на другой
Если представить веб-страницу в виде трёхмерного пространства (рис. 3.53), то видно, что карты располагаются также по оси Z. Значения по этой оси и определяют, какая карта к нам ближе, какая дальше, иными словами порядок их наложения друг на друга. В коде документа (пример 3.38) порядок определяется автоматически на основе потока документа. Чем элемент ниже в коде, тем он выше по оси Z, поэтому изображение с тузом, как самое нижнее, располагается поверх остальных карт.
Рис. 3.53. Воображаемые координаты веб-страницы
Пример 3.38. Обычный порядок карт
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Порядок карт .card IMG < position: relative; >.seven < left: -120px; top: 25px; >.ace 
В CSS за положением по Z-оси отвечает свойство z-index , которое определяет, «ближе» к нам элемент находится или «дальше». В качестве значений принимается целое число, чем оно больше, тем выше располагается элемент по отношению к другим. Элементам автоматически присваивается значение 0, так что даже z-index : 1 заставит элемент перекрывать все нижележащие. Доработаем пример 3.38 так, чтобы порядок карт поменялся на противоположный, причём только редактируя стиль, оставляя HTML-код прежним.
.card IMG < position: relative; >.three < top: 50px; left: 55px; z-index: 5; >.seven < left: -120px; top: 25px; z-index: 2; >.ace
Свойство z-index для класса three специально установлено как 5 для демонстрации, что последовательность значений z-index роли не играет. Главное, чтобы одно число было больше другого.
Свойство z-index работает только для элементов, у которых значение position задано как absolute , fixed или relative .
Когда требуется расположить элемент поверх всех остальных на странице, ему ставят очень большое значение z-index , например 9999. Это гарантирует, что даже если в стилях и применяется z-index , он будет меньше указанного. В примере 3.39 у карт при наведении на них курсора меняется z-index на 10. Никаких скриптов здесь не понадобится, всё делается через псевдокласс :hover .
Пример 3.39. Изменение z-index при наведении на карту
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Порядок карт .card IMG < position: relative; >.three < top: 50px; left: 55px; z-index: 5; >.seven < left: -120px; top: 25px; z-index: 2;>.ace < left: -295px; z-index: 1; >.card IMG:hover Как можно DIV разместить поверх другого DIV-а с определённым смещением?
Здравствуйте, подскажите пожалуйста.
У меня в Drupal-е рисуется карта, шириной 100%, а для этой карты есть блок фильтра, который находится выше неё.
Рабочая область сайта рассчитана на ширину в 1260px, а блок фильтра будет 300px
Как можно этот блок наложить сверху на карту, таким образом, чтобы он был с координатами относительно центра смещён влево (получается) на -630px
Получается самое тупое, это сначала выровнять его по центру с помощью margin-left,right: auto;
а как потом ещё смещение сделать?
На рисунке показано — как хочется зелёным
- Вопрос задан более трёх лет назад
- 57065 просмотров
Как наложить один div поверх другого с помощью CSS
Давайте посмотрим следующий пример, чтобы понять, как это работает:
CSS Overlaying One DIV over Another DIV В приведенном выше примере элемент div с классом .stack-top будет расположен поверх другого div .
Подробнее см. Руководство по позиционированию в CSS, чтобы узнать больше о методах позиционирования CSS.
Читайте также
Похожие примеры:
- Как разместить текст поверх изображения с помощью CSS
- Как центрировать выравнивание с абсолютным позиционированием div с помощью CSS
- Как создать фиксированный header или footer с помощью CSS
Как позиционировать элементы в CSS
Один из важных и сложных для новичков вопросов при изучении CSS, это как позиционировать элементы на странице. Давайте разберёмся как это происходит по умолчанию и как мы можем на это влиять.
Нормальный поток документа
Рассмотрим простой пример.
Document Тестовый пример
Блок 1 Блок 2 Блок 3
И его css пока не влияющий на позиции, но разукрашивающий блоки для наглядности.
@font-face < font-family: 'Open Sans Condensed'; src: url('../fonts/OpenSansCondensed-Light.ttf'); font-style: normal; font-weight: normal; >body < background-color: #D9D9D9; padding-top: 100px; >h1 < font-family: 'Open Sans Condensed', sans-serif; color: #FFF; font-size: 40px; >.container < width: 70%; margin: 0 auto; >.container < border: 2px dashed #FFF; padding: 20px; >.container .item
Когда вы никак не влияете на позиционирование элементов, браузер выводит их по порядку.
Это называется нормальным потоком документа. Более подробно про DOM и поток документа можно почитать в этой статье . И так, одним из способов повлиять на поток, это использование CSS свойства position.
Свойство position
Что же позволяет свойство position? Данное свойство даёт нам возможность извлечь элемент из нормального потока документа и разместить его в другом месте веб страницы, например относительно окна браузера или родительского элемента.
Свойство position имеет 5 значений:
- static (статичное позиционирование);
- relative (относительное);
- absolute (абсолютное);
- fixed (фиксированное);
- sticky (липкое).
Значение static — является значением по умолчанию. Оно означает что элемент находится в нормальном потоке документа. Стоит также отметить, что каждый элемент страницы занимает определённую область (имеет ширину и высоту) относительно других элементов. Если мы начинаем изменять значение свойства position , занимаемая элементом область может за ним не сохраниться. К пример postion: absolut; или position:fixed; напрочь выдёргивают элемент из потока, при этом соседние элементы перестают его видеть, несмотря на то что в html коде страницы он есть и занимают эту область.
Статичное позиционирование (position: static)
Как уже говорилось выше, статическое позиционирование присуще всем элементам страницы по умолчанию. Вам не нужно явно указывать это свойство в CSS.
.container .item
Пунктирная линия в данном скриншоте обозначает границы родительского элемента с классом container . Элементы внутри родителя располагаются один за другим как и описаны в коде.
Относительное позиционирование (position:relative)
При использовании position:relative; для блока начинаю работать такие css свойства как:
Они позволяют задать расположение элемента, относительно того места, где он находился в нормальном потоке. Добавим такой стиль блокам item из примера:
.container .item
Как видите блоки сместились на 80 и 50 пикселей относительно нормального расположения.
Абсолютное позиционирование (position: absolute)
Давайте применим абсолютное позиционирование для третьего блока, а заодно изменим ему цвет. Стили будут вот такими:
.container .item:nth-last-child(2)
В результате элемент «выпадет» из нормального потока, а его место займёт соседний элемент, т.е. блок номер 3.
В данном случае величина отступа bottom: 10%; и left:13%; рассчитываются от края окна браузера.
Фиксированное позиционирование (position: fixed)
Если изменить позиционирование элемента на fixed, мы закрепим его в определённом месте окна браузера так, что он будет находится там даже при прокрутке страницы. Элемент при этом так же выпадает из нормального потока документа. Давайте добавим ещё несколько блоков в наш html чтобы стала доступна вертикальная прокрутка документа:
Document Тестовый пример
Блок 1 Блок 2 Блок 3 Блок 4 Блок 5 Блок 6 Блок 7 Блок 8 Блок 9 Блок 20 Блок 11
И поправим CSS стили подопытного блока.
.container .item:nth-last-child(2)
Здесь я добавил ещё одно свойство z-index: 10000; которое гарантирует что этот элемент будет отображаться поверх всех остальных. Что мы получаем в итоге:
Блок 20 «закреплён» при помощи position: fixed; , а его местоположение относительно краёв окна браузера заданы свойствами bottom: 10%; left: 13%;
Совмещаем relative и absolute
По умолчанию когда мы используем position: absolute; местоположение элемента вычисляется относительно границ окна браузера. Однако, мы можем изменить это поведение задав родительскому блоку position: relative;
Вернём тестовому блоку абсолютное позиционирование:
.container .item:nth-last-child(2)
А его родителю, т.е. container зададим относительное позиционирование.
.container
Теперь наш тестовый элемент выпадет из потока, но будет позиционироваться относительно родителя, а не краёв окна браузера:
Таким образом мы можем более гибко управлять положением html элементов на странице при помощи css. Конкретно такая комбинация позволяет к примеру расположить иконки пунктов меню напротив текста, где иконки позиционируются абсолютно, но «внутри» пункта, которому задано относительное позиционирование.
Обязательно протестируйте примеры из статьи, попробуйте добавить больше родительских и дочерних блоков, меняйте свойство position , это достаточно важная тема которая позволит вам научится профессионально верстать. Другие приёмы управления расположением элементов на странице, я рассмотрю позже в последующих статьях касающихся потока документа. Желаю удачи!