Понимание CSS z-index
Обычно HTML страницы можно считать двухмерными, потому что текст, картинки и другие элементы расположены на странице без перекрытия. Существует единый нормальный поток отрисовки (rendering flow) и элементы избегают пространства, занятого другими. z-index атрибут позволяет регулировать порядок наложения объектов друг на друга в процессе отрисовки контента (rendering content).
В CSS 2.1, позиция каждого блока была в трёх измерениях. В дополнении к их горизонтальной и вертикальной позиции блоки лежали вдоль оси «z» и располагались один поверх другого. Позиция относительно оси «z» особенно актуальна, когда блоки визуально накладываются друг на друга.
Это означает, что правила стиля CSS позволяют вам позиционировать блоки на слоях в дополнение к обычному слою рендеринга (слой 0). Положение Z каждого слоя выражается как целое число, представляющее порядок наложения для рендеринга. Большие числа означают ближе к наблюдателю. Положение Z можно контролировать с помощью свойства CSS z-index.
Использование z-index кажется чрезвычайно простым: одно свойство, которому присваивается одно целое число, с простым для понимания поведением. Однако, когда z-index применяется к сложным иерархиям элементов HTML, его поведение может быть трудно понять или предсказать. Это объясняется целым комплексом правил «укладки» элементов. Фактически в спецификации CSS-2.1 Appendix E (CSS-2.1 Приложение Е) зарезервирован целый раздел, подробно объясняющий эти правила.
Данная статья попытается объяснить эти правила, с некоторым упрощением и несколькими примерами.
- Позиционирование без z-индекса : правила по умолчанию
- Позиционирование и float : как себя поводят float элементы c позиционированием
- Использование z-index : Using z-index to change default stacking
- The stacking context : Notes on the stacking context
- Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
- Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
- Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
Информация о документе
- Автор: Paolo Lombardi
- Эта статья — английский перевод статьи, которую я написал на итальянском для YappY. Я даю право делиться всем контентом: Creative Commons: Attribution-Sharealike license
- Дата последнего обновления: 9 июля 2005 г.
Примечание автора: спасибо Владимиру Паланту и Роду Уайтли за обзор.
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Как заставить работать z-index?
Не могу понять, хочу что бы первый блок при наведении (hover) перекрывал нижний блок, а он его сдвигает. position: relative; и z-index проставил но без успеха! Что я делаю не так?
.cardhe < background:#000; width: 200px; margin: auto; color: white;>.pricepu:hover < overflow: visible; white-space: normal; z-index: 2; >.pricepu < position: relative; overflow: hidden; white-space: nowrap; word-wrap: normal; text-overflow: clip; display: block; margin: 1px 4px; min-height: 25px; position: relative; >.text
111 111 222222 333333 55555 6543453 6453 zzzzzzzzzzz
Отслеживать
задан 11 дек 2018 в 7:10
125 9 9 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Потому что position: relative не извлекает элемент из потока. По ховеру у Вас размер элемента увеличивается, соответственно, увеличивается и занимаемое им место в потоке. Потому и нижний элемент сдвигается. Z-index здесь не поможет.
Если Вы хотите просто наслоения одного элемента на другой, то надо использовать position: absolute. Правда, поскольку такое позиционирование извлекает элемент из потока, для него придётся искусственно освободить место, задав родителю нужный padding-top:
.cardhe < background:#000; width: 200px; margin: auto; color: white; position: relative; padding-top: 25px; >.pricepu < position: absolute; top: 0; overflow: hidden; white-space: nowrap; word-wrap: normal; text-overflow: clip; display: block; margin: 1px 4px; min-height: 25px; >.pricepu:hover < overflow: visible; white-space: normal; >.text
111 111 222222 333333 55555 6543453 6453 zzzzzzzzzzz Отслеживать
ответ дан 11 дек 2018 в 7:35
humster_spb humster_spb
13.5k 4 4 золотых знака 24 24 серебряных знака 47 47 бронзовых знаков
- css
- position
- z-index
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
z-index
CSS-свойство z-index определяет положение позиционированного элемента и его дочерних элементов или флекс-элементов по оси z. Перекрывающие элементы с большим значением z-index будут накладываться поверх элементов с меньшим z-index.
Интерактивный пример
Для позиционированного элемента (т.е. если у него задано свойство position со значением, отличающимся от static ) свойство z-index отвечает за:
- Порядок наложения в текущем контексте наложения.
- Возможность создания локального контекста наложения.
Синтаксис
/* Ключевое слово */ z-index: auto; /* Значения типа */ z-index: 0; z-index: 3; z-index: 289; z-index: -1; /* Отрицательные значения понижают приоритет */ /* Глобальные значения */ z-index: inherit; z-index: initial; z-index: revert; z-index: revert-layer; z-index: unset;
Значением свойства z-index может быть либо auto , либо целое число ( ).
Значения
Элемент не будет создавать нового локального контекста наложения. Порядок наложения блока в текущим контексте наложения будет равен 0 .
Формальное определение
| Начальное значение | auto |
|---|---|
| Применяется к | позиционированные элементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | целое число |
| Создаёт контекст наложения | да |
Формальный синтаксис
z-index =
auto | (en-US)
| (en-US)
inherit
Примеры
Визуальное наложение элементов
HTML
div class="wrapper"> div class="dashed-box">Пунктирный блокdiv> div class="gold-box">Блок золотого цветаdiv> div class="green-box">Зелёный блокdiv> div>
CSS
.wrapper position: relative; > .dashed-box position: relative; z-index: 1; border: dashed; height: 8em; margin-bottom: 1em; margin-top: 2em; > .gold-box position: absolute; z-index: 3; /* помещаем .gold-box поверх .green-box и .dashed-box */ background: gold; width: 80%; left: 60px; top: 3em; > .green-box position: absolute; z-index: 2; /* помещаем .green-box поверх .dashed-box */ background: lightgreen; width: 20%; left: 65%; top: -25px; height: 7em; opacity: 0.9; >
Результат
Спецификации
| Specification |
|---|
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # z-index |
Поддержка браузерами
BCD tables only load in the browser
Смотрите также
- CSS-свойство position
- Понимание CSS z-index
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
z-index
Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index . Это свойство работает только для элементов, у которых значение position задано как absolute , fixed или relative .
Синтаксис
z-index: число | auto | inherit
Значения
В качестве значения используются целые числа (положительные, отрицательные и ноль). Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index , на переднем плане находится тот элемент, который в коде HTML описан ниже. Хотя спецификация и разрешает использовать отрицательные значения z-index , но такие элементы не отображаются в браузере Firefox до версии 2.0 включительно.
Кроме числовых значений применяется auto — порядок элементов в этом случае строится автоматически, исходя из их положения в коде HTML и принадлежности к родителю, поскольку дочерние элементы имеют тот же номер, что их родительский элемент. Значение inherit указывает, что оно наследуется у родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
z-index #layer1, #layer2, #layer3, #layer4 < position: relative; /* Относительное позиционирование */ >#layer1, #layer3 < font-size: 50px; /* Размер шрифта в пикселах */ color: #000080; /* Синий цвет текста */ >#layer2, #layer4 < top: -55px; /* Сдвигаем текст вверх */ left: 5px; /* Сдвигаем текст вправо */ color: #ffa500; /* Оранжевый цвет текста */ font-size:70px; /* Размер шрифта в пикселах */ >#layer1 < z-index: 2; >#layer2 < z-index: 1; >#layer3 < z-index: 3; >#layer4 Слой 1 наверху
Слой 4 наверху
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства z-index
Объектная модель
[window.]document.getElementById(» elementID «).style.zIndex
Браузеры
Список, созданный с помощью тега , в браузере Internet Explorer 6 всегда отображается поверх других элементов, несмотря на значение z-index .
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit и интерпретирует auto как 0.
В браузере Firefox до версии 2.0 включительно отрицательное значение z-index располагает элемент ниже фона веб-страницы и его контента.
Предыдущая запись