Z-index в CSS разбираем на типичных примерах
Свойство Z-index описывает уровень стека представления элемента на странице относительно остающихся в потоке элементов.
Его значением является число. Вместе с увеличением z-index элемента, близость к пользователю также увеличивается.
Пример кода Z-index
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.logo {
position:absolute;
font-family:Century;
font-size:2em;
font-weight:bold;
z-index:20;
}
#logo1 {
left:50px;
top:50px;
color:#00f;
}
#logo2 {
left:52px;
top:52px;
color:#f00;
z-index:10;
}
.box {
position:absolute;
height:100px;
width:100px;
border:15px solid #000;
}
#box1 {
left:150px;
top:150px;
border-color:#f00;
z-index:40;
}
#box2 {
left:185px;
top:185px;
border-color:#00f;
z-index:30;
}
#box3 {
left:185px;
top:150px;
border-color:#060;
z-index:20;
}
#box4 {
left:150px;
top:185px;
border-color:#f60;
z-index:10;
}
</style>
<title>CSS Z-Index</title>
</head>
<body>
<h2>CSS Z-Index</h2>
<div>Webucator</div>
<div>Webucator</div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Обратите внимание, как определенные элементы div расположены поверх других.
Если z-index этих элементов изменяется, расположение их стека изменится также.
Display – когда применять?
Свойство display применяется для установки, должен ли элемент появиться на странице или нет. Самыми популярными значениями для этого элемента являются следующие:
- block
- inline
- none
Наиболее типичные примеры применения свойства display:
- Для показа и сокрытия элементов в зависимости от взаимодействия с пользователем. Частый пример – это ниспадающее меню. Такие динамические изменения стилей представлены значениями javascript.
- Чтобы скрыть элементы для определенных типов медиа. Например, можно «отключить» показ картинок, просто указав значение none для свойства display в таблице стилей, которая используется для печати документа
- Конвертация инлайновых элементов, таких как link, в блочные элементы при помощи изменения значения свойства display на block
Пример ниже демонстрирует, как свойство display может применяться для изменения ссылок в элементы block.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Link Buttons</title>
<style type="text/css">
a {
display:block;
padding: 6px 4px;
margin: 4px;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
border-top-width: 0px;
border-left-width: 0px;
background-color: #eaf1dd;
color:#060;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:1.5em;
}
</style>
</head>
<body>
<h2>Button Links</h2>
<div>
<a href="http://www.washingtonpost.com">WashingtonPost.com</a>
<a href="http://www.webucator.com">Webucator</a>
<a href="http://www.google.com">Google</a>
</div>
</body>
</html>
Visibility (Видимость)
Свойство visibility применяется, когда вы хотите воздействовать на видимость элемента. Возможные значения этого свойства:
- visible
- hidden
Самое главное различие между visibility и hidden элемента состоит в том, что если указано значение hidden, то скрытый элемент по прежнему может влиять на раскладку вашей страницы. Элементы, у которых свойство display имеет значение none, такого эффекта не имеют.
[ads-pc-1]
[ads-mob-1]
Оцени статью
Средняя оценка 5 / 5. Количество голосов: 2
Видим, что вы не нашли ответ на свой вопрос.
Помогите улучшить статью.
Напишите комментарий, что можно добавить к статье, какой информации не хватает.
Найти:Сайдбар
Комментарии (0)
z-index ⚡️ HTML и CSS с примерами кода
Свойство z-index определяет положение элемента и нижестоящих элементов по оси z. В случае перекрытия элементов, это значение определяет порядок наложения. В общем случае, элементы с большим z-index перекрывают элементы с меньшим.
Для позиционируемого контейнера свойство z-index определяет:
- порядок наложения в текущем контексте наложения;
- создаёт ли контейнер локальный контекст наложения.
- bottom
- clear
- display
- float
- left
- position
- right
- top
- 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: unset;
Значения
В качестве значения используются целые числа (положительные, отрицательные и ноль). Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже. Допустимо использовать отрицательное значение.
Кроме числовых значений применяется auto — порядок элементов в этом случае строится автоматически, исходя из их положения в коде HTML и принадлежности к родителю, поскольку дочерние элементы имеют тот же номер, что их родительский элемент.
- Контейнер не будет создавать локального контекста наложения. Уровень контейнера в текущем контексте наложения такой же, как и у родительского.
<integer>- Целое число определяет уровень контейнера в текущем контексте наложения. Контейнер также будет создавать локальный контекст наложения, в котором его собственный уровень будет равен
0. Это значит, что значенияz-indexнижестоящих элементов не будут сравниваться с z-индексами элементов вне этого контейнера.
Значение по-умолчанию: auto
Применяется к позиционированным элементам
Спецификации
- CSS Level 2 (Revision 1)
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Порядок карт</title>
<style>
.
card {
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:hover {
z-index: 10;
}
</style>
</head>
<body>
<img src="image/3.png" alt="3" />
<img src="image/7.png" alt="7" />
<img src="image/ace.png" alt="Туз" />
</body>
</html>
css — z-индекс для вложенного div
спросил
Изменено 4 года, 7 месяцев назад
Просмотрено 1к раз
Я ожидаю получить такой результат:
https://ibb.co/htJD6J
В моих стилях я установил относительную позицию родителя; z-index 50. Для ребенка я установил абсолютную позицию; z-индекс 25.
Но в результате у меня вот что.
P.S. Извините, недостаточно репутации для публикации изображений. Итак, я не могу понять, почему z-index работает неправильно. Может ли кто-нибудь помочь мне с этим?
Добавить код: родитель
.sel_project_block {
цвет фона: #f5876e;
радиус границы: 14px;
поле справа: 150 пикселей;
ширина: 239 пикселей;
высота: 34 пикселя;
дисплей: гибкий;
выравнивание содержимого: flex-end;
выравнивание элементов: по центру;
положение: родственник;
box-shadow: 1px 3px 7px #000;
z-индекс: 5;
}
ребенок
.дополнительно {
максимальная ширина: 185 пикселей;
положение: абсолютное;
топ: 76,2%;
справа: 22,05%;
z-индекс: 1;
цвет: #67573e;
цвет фона: #fff;
граница: 1px сплошная #978d7e;
размер шрифта: 16px;
ширина: 185 пикселей;
}
- css
- мопс
- scss-ворс
3
Поскольку . child относительно своего .parent , то же самое относится и к его z-индексу. Вы можете покончить с этим, удалив z-индекс родителя:
.sel_project_block {
цвет фона: #f5876e;
радиус границы: 14px;
поле справа: 150 пикселей;
ширина: 239пкс;
высота: 34 пикселя;
дисплей: гибкий;
выравнивание содержимого: flex-end;
выравнивание элементов: по центру;
положение: родственник;
box-shadow: 1px 3px 7px #000;
}
.дополнительный {
высота: 50 пикселей;
максимальная ширина: 185 пикселей;
положение: абсолютное;
топ: 76,2%;
справа: 22,05%;
z-индекс: -1;
цвет: #67573e;
цвет фона: #fff;
граница: 1px сплошная #978d7e;
размер шрифта: 16px;
ширина: 185 пикселей;
} <дел> <дел>
1
Установка положения : все, что не статично устанавливает новый контекст стека.
Положение дочернего элемента равно относительно родительского элемента (то есть положение : относительное ).
Итак, если вы хотите, чтобы отображалось позади родительского элемента , вы должны задать ему отрицательный z-index .
Поскольку div#child является дочерним элементом div#parent , и поскольку div#parent устанавливает контекст стека (поскольку он имеет целочисленное значение z-index), вы не можете поместить div#parent поверх div#child , увеличив его z-index
Z-индекс, который вы установили для div#child , находится в контексте div#parent . Поэтому, если вы хотите, чтобы div#child отображался ниже div#parent , вам нужно установить отрицательный z-индекс для div#child .
в будущем — если вы отправите код, сопровождающий ваш вопрос, ответы будут легче понять. (Кроме того, правильно заданный вопрос также даст лучшие результаты)
1
Хорошо, коллеги. Через несколько часов я решаю свои проблемы.
Что я сделал:
сначала я добавил новую оболочку и поместил в нее все блоки, включая родительский и дочерний.
во-вторых, я добавил в блок-обертку z-index = 3; и установите в раскрывающемся блоке z-index = -1.
Кажется в мопсе:
.dropdownWrapper
.sel_project_block
.sel_project_block__proj
новый проект
.sel_project_block__imgWrapper(@click="showDropdown")
img(src="../assets/images/white-arrow.png")
.clientsTop__dropdown
.дополнительно(v-if="dropdownVisible")
.first {{ newProject.trans }}
…
и код scss:
.dropdownWrapper {
высота: 34 пикселя;
ширина: 239 пикселей;
поле справа: 50px;
z-индекс: 3;
положение: родственник;
.sel_project_block {
...
}
.clientsTop__dropdown {
z-индекс: -1;
положение: абсолютное;
топ: 59,2%;
справа: 13,8%;
...
.дополнительный {
...
}
}
}
Зарегистрируйтесь или войдите
Зарегистрироваться через Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Изучение Z-индекса с помощью инструмента визуализации
Вы всегда находили концепцию z-индекса сложной? Вы присвоили элементу HTML значение z-index 99999, надеясь, что он будет размещен перед всем на странице, и это все равно не сработало? Если ваш ответ да, вы пришли в нужное место.
Ниже я объясню все, что вам нужно знать о z-индексе, и поделился отличным инструментом визуализации, который поможет вам изменить z-индексы элементов, переупорядочить их с помощью функции перетаскивания и показать вам изменения в режиме реального времени.
Заказ на размещение и укладку
Давайте быстро пробежимся по основам. Значение позиции по умолчанию для любого элемента HTML является статическим. Любой элемент со значением по умолчанию static является непозиционированным элементом.
Элемент является позиционируемым, если его значение позиции является одним из следующих: относительным, абсолютным, фиксированным или фиксированным.
Каждый HTML-элемент на странице может находиться перед (или) позади другого элемента. Это называется порядком наложения. Например, всплывающее окно находится перед содержимым за ним.
Давайте посмотрим, как это будет выглядеть-
Содержание (Положение: относительно)
Всплывающее окно № 1 (позиция: абсолют)
Как определить порядок размещения позиционированных и непозиционированных элементов? Здесь нам помогает z-index. z-index заботится о порядке укладки самих позиционируемых элементов. Z-индекс может быть любым положительным (или) отрицательным числом, включая ноль. Это не влияет на непозиционированный элемент — значение position статического. Обратите внимание на две ключевые точки: Самое интересное. Поиграйте с элементами div в инструменте визуализации ниже. Измените порядок наложения, либо переупорядочив элементы с помощью маркера перетаскивания, либо изменив z-индекс. Используйте ссылку Сброс в любое время, чтобы вернуться к конфигурации по умолчанию. Элемент с абсолютным позиционированием не изменит свою позицию, поскольку он привязан к своему родителю. Сброс div #z-indexposition 13020100-10относительный 23020100-10относительный 33020100-10абсолютный. Впр. -Index of a HTML Element Аналогично для отрицательных значений. Это поможет вам быстро устранять проблемы с z-index.
z-index: 10
div #2
позиция: относительная;
z-index: 20
div #3
позиция: абсолютная;
z-index: 30
Вам понравилось то, что вы прочитали?
Присоединяйтесь к растущему списку из более чем 300 читателей
Stacking Context
Допустим, у вас есть приведенный ниже HTML-код с позиционированными элементами.
<тело>
<дел/>
<дел>
<дел/>
Будет ли элемент div3 располагаться перед элементом div1, поскольку он имеет более высокий z-индекс? Ответ — нет. Сначала это может показаться удивительным, но все сводится к тому, как сгруппированы элементы HTML.
Обратите внимание, что div1 — это отдельный элемент, который образует группу из одного элемента. div2 образует группу с div2 в качестве родителя и div3 в качестве дочернего элемента. Позиционированный элемент формирует контекст наложения. Позиционируемый элемент может быть либо отдельным элементом, либо родительским элементом с дочерними элементами.
Вот ключевая часть — z-индекс дочернего элемента не действует вне его группы. Z-индекс div3 определяет свою позицию в порядке наложения только среди своих братьев и сестер и не действует за пределами своей группы. По этой причине установка даже большого значения, такого как 99999, в div3 не поместит его перед div1.
Посмотрите на код ниже. Здесь div3 и div4 являются братьями и сестрами, и div3 будет помещен перед div4, так как у него более высокий z-индекс.
<тело>
<дел/>
<дел>
<дел/>
<дел/>