我有一个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;
} <!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)但它没有一个令人满意的答案,因此我在这里用我的示例代码问这个问题)
ste*_*och 444
添加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;
} <!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>Mr_*_*ags 128
这个问题可以通过多种方式解决,但实际上,了解堆叠规则可以让您找到最适合您的答案.
该<html>元素是你唯一的叠加背景下,所以只要按照堆叠环境内堆叠规则,你会看到,元素顺序堆叠
- 堆叠上下文的根元素(
<html>本例中的元素)- 具有负z-index值的定位元素(及其子元素)(较高值堆叠在较低值的前面;具有相同值的元素根据HTML中的外观堆叠)
- 非定位元素(按HTML中的外观排序)
- z-index值为auto的定位元素(及其子元素)(按HTML中的外观排序)
- 具有正z-index值的定位元素(及其子元素)(较高值堆叠在较低值的前面;具有相同值的元素根据HTML中的外观堆叠)
所以你可以
#under定位的-ve z-index出现在非定位#over元素后面#overto 的位置,relative以便规则5适用于它在尝试更改元素的堆叠顺序之前,开发人员应该了解以下内容.
<html>元素是根元素,是第一个堆叠上下文<html>元素)时元素的顺序:
<html>默认情况下,元素是唯一的堆叠上下文,但任何元素都可以是堆叠上下文的根元素,请参阅上面的规则)
cus*_*ar9 34
z索引仅在特定上下文即内工作relative,fixed或absolute位置.
相对div的z-index与z-index绝对或固定div 无关.
编辑 这是一个不完整的答案.这个答案提供了虚假信息.请查看@ Dansingerman的评论和示例如下.
Car*_*oso 18
给出#under否定的z-index,例如-1
发生这种情况是因为z-index忽略了属性position: static;,这恰好是默认值; 所以在你编写的CSS代码中,无论你设置多高,它z-index都1适用于这两个元素#over.
通过给出#under负值,它将落后于任何z-index: 1;元素,即#over.
| 归档时间： |
|
| 查看次数： |
470898 次 |
| 最近记录： |