Z-индекса не работает с фиксированным позиционированием
у меня есть div
С размещения по умолчанию (т. е. position:static
) и div
С fixed
положении.
если я устанавливаю Z-индексы элементов, кажется невозможным сделать фиксированный элемент позади статического элемента.
css lang-css prettyprint-override"> #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;
}
<!DOCTYPE html>
<html>
<body>
<div id="over">
Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>
<div id="under">
</div>
</body>
</html>
или на jsfiddle здесь:http://jsfiddle.net/mhFxf/
Я могу обойти это, используя
position:absolute
о статическом элементе, но может ли кто-нибудь сказать мне почему это происходит?
(кажется, есть аналогичный вопрос к этому, (Исправлена ошибка позиционирования z-index) но у него нет удовлетворительного ответа, поэтому я спрашиваю это здесь с моим примером кода)
9 ответов
этот вопрос может быть решен несколькими способами, но на самом деле, зная правила укладки позволяет найти лучший ответ, который работает для вас.
решений
на <html>
элемент - ваш единственный контекст укладки, поэтому просто следуйте правилам укладки внутри контекста укладки, и вы увидите, что элементы укладываются в этом порядке
- корневой элемент контекста укладки (
<html>
элемент в данном случае)- расположенные элементы (и их дочерние элементы) с отрицательными значениями Z-индекса (более высокие значения укладываются перед более низкими значениями; элементы с тем же значением укладываются в соответствии с внешним видом в HTML)
- непозиционные элементы (упорядоченные по внешнему виду в HTML)
- позиционированные элементы (и их дочерние элементы) со значением Z-индекса auto (упорядоченным по внешнему виду в HTML)
- позиционированные элементы (и их дочерние элементы) с положительным Z-индексом значения (более высокие значения укладываются перед более низкими значениями; элементы с тем же значением укладываются в соответствии с внешним видом в HTML)
вы можете
- установите Z-индекс -1, для
#under
positioned-ve z-index появляется за не-positioned#over
элемент - установить позицию
#over
torelative
так что Правило 5 относится к нему
Проблема
разработчики следует знать, прежде чем пытаться изменить порядок размещения элементов.
- при формировании контекста укладки
- по умолчанию
<html>
элемент является корневым элементом и является первым укладки контексте
- по умолчанию
- Порядок укладки в контексте укладки
Порядок укладки и правила контекста укладки ниже приведены по этой ссылке
когда формируется контекст укладки
- если элемент является корневым элементом документа (
<html>
элемент) - когда элемент имеет значение позиции, отличное от статического, и значение z-индекса, отличное от auto
- когда элемент имеет значение непрозрачности меньше 1
- несколько новых свойств CSS, также создают условия штабелирования. К ним относятся: преобразования, фильтры, css-регионы, выгружаемые носители и, возможно, другие. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
- как правило, кажется, что если свойство CSS требует рендеринга в закадровом контексте, оно должно создать новый контекст стекирования.
Порядок укладки в контексте укладки
порядок элементов:
- корневой элемент контекста укладки (
<html>
элемент единственный штабелировать контекст по умолчанию, но любой элемент может быть корневым элементом для контекста укладки, см. правила выше)- вы не можете поместить дочерний элемент за корневой элемент контекста укладки
- расположенные элементы (и их дочерние элементы) с отрицательными значениями Z-индекса (более высокие значения укладываются перед более низкими значениями; элементы с тем же значением укладываются в соответствии с внешним видом в HTML)
- непозиционные элементы (упорядоченные по внешнему виду в HTML)
- позиционированные элементы (и их дочерние элементы) со значением Z-индекса auto (упорядоченным по внешнему виду в HTML)
- расположенные элементы (и их дочерние элементы) с положительными значениями Z-индекса (более высокие значения укладываются перед более низкими значениями; элементы с тем же значением укладываются в соответствии с внешним видом в HTML)
добавить position: relative;
to #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;
}
<!DOCTYPE html>
<html>
<body>
<div id="over">
Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>
<div id="under"></div>
</body>
</html>
поскольку over
div не имеет позиционирования, Z-индекс не знает, где и как его позиционировать (и относительно чего?). Просто измените свое положение над div на относительное, чтобы не было никаких побочных эффектов на этом div, а затем под div будет подчиняться вашей воле.
вот ваш пример на jsfiddle:Скрипка
редактировать: Я вижу, кто-то уже упоминал этот ответ!
дать #under
отрицательный z-index
, например,-1
это происходит потому, что z-index
свойство игнорируется в position: static;
, что является значением по умолчанию; поэтому в коде CSS вы написали,z-index
is 1
для обоих элементов независимо от того, как высоко вы установите его в #over
.
дав #under
отрицательное значение, оно будет за любым z-index: 1;
элемент, т. е. #over
.
Я создавал навигационное меню. У меня overflow: hidden
в css моего навигатора, который скрывал все. Я думал, что это проблема z-индекса, но на самом деле я скрывал все за пределами моего навигатора.
когда элементы расположены вне нормального потока, они могут перекрывать другие элементы.
согласно перекрывая разделу элементов дальше http://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp
просто посмотри в документация MDN. Есть лучшее объяснение, которое я когда-либо видел.
поведение фиксированных элементов (и абсолютных элементов), определенных в спецификации CSS:
Они ведут себя так, как они отделены от документа и помещены в ближайший фиксированный/абсолютный расположенный родитель. (ни слова по слову цитата)
Это делает расчет zindex немного сложным, я решил свою проблему (та же ситуация), динамически создавая контейнер в элементе тела и перемещая все такие элементы (которые являются классами как "мои фиксированные" внутри этот элемент уровня тела)