Z index не работает: четыре возможные причины возникновения проблемы

Leave a Comment / Разное / By /

html — Не работает z-index

Вопрос задан

Изменён 7 лет 6 месяцев назад

Просмотрен 9k раза

Есть два элемента

<div>
            321321
            </div>
            <div>
            11
            </div>

CSS

.menu_1{
background-color:#333333;
height:300px;
z-index: 1; 
}
.menu_2{
background-color:#cccccc;
height:400px;
z-index: 0; 
}

Но почему то первый блок не перекрывает второй, а идут поочередно, почему?

  • html
  • css

Он и не должен перекрывать, если не задан стиль position. Задайте например position : absolute

И z-index ставьте больше 1, т.к. это дефолтное положение.

1

z-index, отличный от auto только создаёт новый контекст и управляет расположением элемента поверх или под другими элементами внутри родительского контекста. За пределы родительского контекста выбраться нельзя, как-то взаимодействовать с элементами вне него — тоже.

Помимо z-index контекст создают opacity, transform и position при своих недефаултных значениях. Возможно, ещё что-то — навскидку в голову не приходит.

Контекс никак не связан с расположением элемента по x и y, поэтому наложения одного элемента на другой не происходит и не должно происходить. Для наложения надо использовать позиционирование, либо отрицательный margin.

По умолчанию у ваших блоков стоит position:static, соответственно, они выводятся в общем потоке элементов страницы — один за другим — последовательно. Свойство z-index работает только с установленным позиционирование, т.е. position: {relative, absolute, fixed} Задайте второму блоку отрицательный margin, например, margin-top: -50px и позиционирование блокам. Увидите ожидаемое наложение. Обязательно усвойте значения, которые может принимать свойство position и как они работают.

Понимание этих основ избавит от многих проблем в будущем.

.menu_1{ background-color:#333333; height:300px; position: relative; z-index: 2; }

.menu_2{ background-color:#cccccc; height:400px; margin-top: -50px; position: relative; z-index: 1; }

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

z-index — CSS | MDN

CSS-свойство z-index определяет положение позиционированного элемента и его дочерних элементов или флекс-элементов по оси z. Перекрывающие элементы с большим значением z-index будут накладываться поверх элементов с меньшим z-index.

Для позиционированного элемента (т.е. если у него задано свойство position со значением, отличающимся от static) свойство z-index отвечает за:

  1. Порядок наложения в текущем контексте наложения.
  2. Возможность создания локального контекста наложения.
/* Ключевое слово */
z-index: auto;
/* Значения типа <integer> */
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, либо целое число (<integer>).

Значения

auto

Элемент не будет создавать нового локального контекста наложения. Порядок наложения блока в текущим контексте наложения будет равен

0.

<integer>

Порядок наложения блока, заданный в виде целого числа (<integer>) в текущем контексте наложения. При этом элемент создаёт новый локальный контекст наложения. Таким образом значения z-index дочерних элементов внутри нового контекста наложения не будут сравниваться со значениями z-index элементов за пределами этого блока.

Начальное значениеauto
Применяется кпозиционированные элементы
Наследуетсянет
Обработка значениякак указано
Animation typeцелое число
Создаёт контекст наложения да
z-index = 
auto       | (en-US)
<integer>  | (en-US)
inherit

Визуальное наложение элементов

HTML
<div>
  <div>Пунктирный блок</div>
  <div>Блок золотого цвета</div>
  <div>Зелёный блок</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 with JavaScript enabled. Enable JavaScript to view data.

  • 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.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

css — z-index не работает с фиксированным позиционированием

У меня есть div с позиционированием по умолчанию (т.е. position:static ) и div с фиксированной позицией .

Если я устанавливаю z-индексы элементов, кажется невозможным сделать фиксированный элемент позади статического элемента.

 #над {
  ширина: 600 пикселей;
  z-индекс: 10;
}
#под {
  положение: фиксированное;
  верх: 5 пикселей;
  ширина: 420 пикселей;
  слева: 20 пикселей;
  граница: сплошная 1px;
  высота: 10%;
  фон: #fff;
  z-индекс: 1;
} 
 <дел>
  привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет

Или на jsfiddle здесь: http://jsfiddle. net/mhFxf/

Я могу обойти это, используя позиция: абсолютная на статический элемент, но может ли кто-нибудь сказать мне , почему это происходит?

(Кажется, есть вопрос, похожий на этот (фиксированное позиционирование, нарушающее z-индекс), но на него нет удовлетворительного ответа, поэтому я задаю его здесь с моим примером кода)

  • css
  • z-индекс

0

Добавить позицию : относительно к #over , как показано в этом фрагменте:

 #over {
  ширина: 600 пикселей;
  z-индекс: 10;
  положение: родственник;
}
#под {
  положение: фиксированное;
  верх: 14 пикселей;
  ширина: 415 пикселей;
  слева: 53px;
  граница: сплошная 1px;
  высота: 10%;
  фон: #f0f;
  z-индекс: 1;
} 
 <дел>
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat.  Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.
<дел>

Скрипка

3

Этот вопрос можно решить несколькими способами, но на самом деле знание правил укладки позволяет найти лучший ответ, который подходит именно вам.

Элемент — это ваш единственный контекст стекирования, поэтому просто следуйте правилам стекирования внутри контекста стекирования, и вы увидите, что элементы сложены в этом порядке

  1. Корневой элемент контекста стека ( элемент в данном случае)
  2. Позиционированные элементы (и их дочерние элементы) с отрицательными значениями z-index (более высокие значения располагаются перед более низкими значениями; элементы с одинаковыми значениями располагаются в соответствии с отображением в HTML)
  3. Непозиционированные элементы (упорядоченные по появлению в HTML)
  4. Позиционированные элементы (и их дочерние элементы) со значением z-index auto (упорядочены по появлению в HTML)
  5. Позиционированные элементы (и их дочерние элементы) с положительными значениями z-index (более высокие значения располагаются перед более низкими значениями; элементы с одинаковыми значениями располагаются в соответствии с отображением в HTML)

Таким образом, вы можете

  1. установить z-индекс -1, для #под позиционированным -ve z-индекс появится за непозиционированным #более элементом
  2. установить положение #over на относительно , чтобы к нему применялось правило 5

Разработчики должны знать следующее, прежде чем пытаться изменить порядок размещения элементов.

  1. При формировании контекста стека
    • По умолчанию Элемент является корневым элементом и первым контекстом стека
  2. Порядок наложения в контексте наложения

Приведенные ниже правила порядка размещения и контекста размещения взяты из этой ссылки

  • Когда элемент является корневым элементом документа (элемент )
  • Когда элемент имеет значение позиции, отличное от статического, и значение z-index, отличное от автоматического
  • Когда значение непрозрачности элемента меньше 1
  • Несколько новых свойств CSS также создают контексты наложения. К ним относятся: преобразования, фильтры, css-регионы, выгружаемые медиа и, возможно, другие. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
  • Как правило, кажется, что если свойство CSS требует рендеринга во внеэкранном контексте, оно должно создать новый контекст стека.

Порядок элементов:

  1. Корневой элемент контекста стека ( элемент является единственным контекстом стека по умолчанию, но любой элемент может быть корневым элементом для контекста стека, см. правила выше)
    • Вы не можете поместить дочерний элемент за корневым элементом контекста стека
  2. Позиционированные элементы (и их дочерние элементы) с отрицательными значениями z-index (более высокие значения располагаются перед более низкими значениями; элементы с одинаковыми значениями располагаются в соответствии с отображением в HTML)
  3. Непозиционированные элементы (упорядоченные по появлению в HTML)
  4. Позиционированные элементы (и их дочерние элементы) со значением z-index auto (упорядочены по появлению в HTML)
  5. Позиционированные элементы (и их дочерние элементы) с положительными значениями z-index (более высокие значения располагаются перед более низкими значениями; элементы с одинаковыми значениями располагаются в соответствии с отображением в HTML)

1

Поскольку ваш div над не имеет позиционирования, z-index не знает, где и как его позиционировать (и относительно чего?). Просто измените позицию над div на относительную, чтобы на этом div не было побочных эффектов, и тогда нижний div будет подчиняться вашей воле.

Вот ваш пример на jsfiddle.

Этот ответ содержит ложную информацию. Вместо этого просмотрите комментарий и пример @Dansingerman.

z-index работает только в определенном контексте, т.е. относительная , фиксированная или абсолютная позиция.

z-index для относительного div не имеет ничего общего с z-index абсолютного или фиксированного div.

6

Дайте #под отрицательный z-index , например. -1

Это происходит потому, что свойство z-index игнорируется в position: static; , что является значением по умолчанию; поэтому в коде CSS, который вы написали, z-index равно 1 для обоих элементов, независимо от того, насколько высоко вы установили его в #over .

Присвоив #меньше отрицательное значение, он будет позади любого z-index: 1; элемент, т.е. #over .

1

Я создавал навигационное меню. У меня есть переполнение : скрытый в моей навигации css, который скрыл все. Я думал, что это проблема с z-индексом, но на самом деле я скрывал все, что находится за пределами моей навигации.

Когда элементы расположены вне нормального потока, они могут перекрывать другие элементы.

в соответствии с разделом «Перекрывающиеся элементы» на http://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp

поведение фиксированных элементов (и абсолютных элементов), как определено в спецификации CSS:

Они ведут себя так, как если бы они были отсоединены от документа и помещены в ближайший родитель с фиксированным/абсолютным позиционированием. (не дословная цитата)

Это делает вычисление zindex немного сложным, я решил свою проблему (та же ситуация), динамически создавая контейнер в элементе тела и перемещая все такие элементы (которые классифицируются как «мои фиксированные» внутри этого тела) элемент уровня)

Z-индекс CSS не работает! Отправить помощь!

«Помогите!! Z-индекс CSS не работает!!! ВТФ!!!!”

Это ты (но без мата)? Не волнуйся — я чувствую твою боль. Независимо от того, сколько я делаю всплывающих окон или фиксированных систем навигации, я всегда забываю золотое правило с селектором CSS z-index: они работают только с определенными элементами .

Получает каждый раз.

TL;DR: Наиболее распространенная причина того, что z-index не работает, — это неявное объявление значения позиции CSS (т.е. позиция: относительная, абсолютная, фиксированная или фиксированная) для элемента.

Но если это не решило вашу проблему с z-индексом или вы просто хотите получить немного больше информации о свойстве CSS, давайте углубимся.

Что такое z-индекс CSS?

Я думаю, что определение свойства z-index в W3Schools описывает это лучше всего:

«Свойство z-index определяет порядок элементов в стеке».

W3Schools —
https://www.w3schools.com/cssref/pr_pos_z-index.asp

По сути, это означает, что вы можете использовать это свойство CSS для наложения элементов друг на друга.

Еще один хороший способ, который мне нравится смотреть на это: это в основном концепция слоев для веб-сайтов.

Если вы когда-либо использовали какое-либо приличное программное обеспечение для редактирования/создания изображений, такое как Photoshop, GIMP или, возможно, даже Canva, то, несомненно, сталкивались с концепцией слоев: возможность размещать изображения, формы, текст и все, что вам нужно. можно использовать друг над другом для создания потрясающего эффекта или отображения.

Вот что может сделать свойство CSS z-index для дизайна вашего сайта.

Я установил позиционирование, но мой z-индекс CSS не работает!

Итак, вы прочитали раздел выше и довольно хорошо усвоили концепцию свойства z-index. Вы также установили значение позиции CSS для элемента, но ваш z-индекс CSS по-прежнему не работает.

Что теперь?

Следующее, что нужно исследовать, — это порядок ваших HTML-элементов и то, как вы применили к ним свойство z-index.

Вот довольно хороший пример того, как CSS z-index работает в реальном сценарии, который может решить вашу проблему.

Как работает свойство CSS z-index?

Свойство CSS z-index работает, присваивая свойство с числовым значением любому элементу.

Свойство может принимать большие числовые значения, а также отрицательные значения, если вы хотите расположить элементы дальше в стеке.

Элемент без специально назначенного ему z-индекса автоматически наследует z-индекс своего родителя, и если родительский элемент не имеет установленного значения, то z-индекс по умолчанию равен 0,9. 0225

Наглядная демонстрация того, как это работает: 

 

  См. перо
  Помощь! Мой z-индекс не работает! Руководство веб-разработчика от Криса Бартона (@TheWebDeveloperGuide)
  на КодПене.

Как видно из приведенного выше примера, мы пытаемся расположить и слой 1, и слой 2 в верхнем левом углу базового слоя. Для этого мы используем свойство CSS абсолютного позиционирования вместе со свойством z-index.

Как видите, оранжевый слой (слой 2) находится сверху. Это связано с тем, что мы установили z-индекс для слоя равным 2. Синий слой (слой 1) имеет z-индекс 1, поэтому слой 2 будет отображаться сверху.

Но что, если мы установим для слоя 2 z-индекс равный 1? Вы можете подумать, что слой 1 будет иметь приоритет, а слой 2 будет скрыт за ним, но это не так.

Поскольку уровень 2 использует абсолютное позиционирование, а его HTML-элемент находится под уровнем 1, он имеет приоритет. Это можно проверить, переместив элемент слоя 1 под слой 2.

Теперь, если мы изменим z-индекс слоя 2, чтобы он имел значение 2, а не 1, слой 2 снова имеет приоритет, потому что мы явно заявили, что он должен располагаться выше уровня 1 в CSS.

Очень интересный материал (по крайней мере, для таких гиков, как я).

Что можно сделать с z-индексом?

Хорошо, вот основные функциональные возможности CSS-свойства z-index, так что давайте взглянем на несколько реальных примеров.

Допустим, мы хотим создать фиксированное навигационное меню, которое наводит курсор на содержимое главной страницы. Затем, всякий раз, когда нажимается параметр, поверх плавающего меню навигации и основного содержимого отображается подменю. Это сценарий, в котором свойство CSS z-index становится важным.

Для этого мы будем использовать HTML5, CSS и Javascript — нажмите здесь, чтобы перейти к codepen (встраивание codepen не может воздать должное этому плохому парню).

Z-Index: создайте правильные слои!

Как видно из демонстрации кода, я устанавливаю z-индекс в двух местах:

  1. Я устанавливаю на главной панели навигации z-индекс 1.
  2. Я устанавливаю вспомогательные панели навигации, чтобы иметь z-индекс 2.

Я хочу, чтобы слоями моих элементов были вспомогательные навигационные ссылки вверху, затем навигация и, наконец, содержимое за ними. Этого можно было добиться немного проще, чем я сделал в этом примере, но я хотел продемонстрировать иерархию элементов z-index в действии.

Я включил HTML-элементы в следующем порядке:

  1. Ссылки навигации.
  2. Панель навигации.
  3. Содержание.

Поскольку я сначала добавил ссылки поднавигации, я должен специально назначить им более высокий z-индекс, чем панели навигации. Это потому, что если второй элемент имеет тот же z-индекс , он будет иметь приоритет над первым, и перекроет его .

В нашем примере это будет означать, что ссылки поднавигации будут скрыты за панелью навигации.

И наоборот, если я перемещу вспомогательную навигацию ниже панели навигации и изменю ее z-индекс на 1, , то элементы вспомогательной навигации все равно перекроют панель навигации .

Довольно интересный материал, если разобрать и изучить. Не стесняйтесь форкнуть мой codepen и поэкспериментировать с элементами самостоятельно.

Главный совет: подумайте об элементах z-index заранее при планировании веб-сайта

При создании веб-сайта вы можете столкнуться с рядом различных элементов, которые необходимо будет наслаивать и перекрывать на одной странице, иногда в в то же время.

Начать планирование

Стоит заранее спланировать порядок, в котором ваши элементы z-index должны иметь приоритет. Например, должно ли всплывающее окно перекрывать элемент навигации? Или должно быть наоборот.

Я говорю это, потому что многие разработчики автоматически устанавливают z-индекс элемента на большое число (что-то вроде 999), и это нормально, потому что это определенно будет перекрывать страницу с таким высоким значением, но это не так.