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

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

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

  #over { width: 600px; z-index: 10; } #under { position: fixed; top: 5px; width: 420px; left: 20px; border: 1px solid; height: 10%; background: #fff; z-index: 1; } 
     
Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello

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

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

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

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

Решения

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

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

Так что вы можете

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

Реальная проблема

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

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

Ниже перечислены правила контекста укладки и стекирования из этой ссылки

Когда формируется контекст укладки

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

Порядок укладки в контексте стекирования

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

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

Добавить position: relative; в #over

  #over { width: 600px; z-index: 10; position: relative; } #under { position: fixed; top: 5px; width: 420px; left: 20px; border: 1px solid; height: 10%; background: #fff; z-index: 1; } 
     
Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello

z-index работает только в определенном контексте, т.е. relative , fixed или absolute положении.

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

EDIT Это неполный ответ. Этот ответ предоставляет неверную информацию. Пожалуйста, просмотрите комментарий и пример @ Дансингермана ниже.

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

вот ваш пример на jsfiddle: Fiddle

edit : Я вижу, что кто-то уже упоминал этот ответ!

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

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

Давая #under под отрицательным значением, оно будет за любым z-index: 1; элемент, т.е. #over .

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

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

в соответствии с разделом Overlapping Elements на http://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp

Просто загляните в документацию MDN . Есть лучшее объяснение, которое я когда-либо видел.

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

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

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

  • Bootstrap Модальное сидение за фоном
  • Как найти самый высокий z-индекс с помощью jQuery
  • Что имеет более высокий приоритет: непрозрачность или z-индекс в браузерах?
  • Давайте будем гением компьютера.