我在相对定位的元素中有一个固定位置元素,就我而言 position: relative
元素不应对 position: fixed
产生任何影响(固定元素相对于窗口定位,对吧?)。
然而,固定元素的z-index似乎被它的父级继承,以至于它的z-index不能高于其父级的z-index。
我希望我说得有道理?下面是我正在谈论的 HTML 示例:
.outer {
position: relative;
z-index: 2;
}
.inner {
background: #fff;
left: 50px;
position: fixed;
top: 40px;
z-index: 1000000;
}
.fade {
background: #555;
bottom: 0;
left: 0;
opacity: 0.5;
position: fixed;
right: 0;
top: 0;
z-index: 3;
}
<div class="outer">
<div class="inner">testing testing</div>
</div>
<div class="fade"></div>
如果您更改以下内容:
.outer { position: relative; z-index: 4; }
然后 .inner
元素出现在淡入淡出元素的前面。
我发现这种行为很奇怪...有没有办法在不移动 .inner
的情况下解决这个问题? div,或更改 .outer
的 CSS分区?
上述代码示例的 fiddle :
最佳答案
简而言之,是的,具有 position:fixed
的元素受其父级的 z-index 限制,因为定义了父级的 z-index
。
很遗憾地通知您,您想要的目前无法实现。获得所需效果的唯一方法是更改 HTML 或从 outer
中删除 z-index。
更改 HTML 选项
第一个选项是将 inner
移到 outer
之外,看起来是 like this .
修复 HTML 的第二个选项是将 fade
移到 outer
内部(甚至使用相同的 CSS)- demo of that here .
第三种选择是将 fade
放在 outer
内,然后将 inner
放在 fade
内, 但这需要您使用 rgba 颜色和不透明度 - that demo is found here .
更改 CSS 选项
使用与当前相同的 HTML,最接近的做法是删除 outer
的 z-index - Demo here .您会认为您可以简单地将每个元素的 z-index 增加 2,但由于子元素的 z-index 不能高于其父元素(如果设置了父元素的 z-index)这一事实,这是行不通的。
解释
如果你仔细想想,fade
和outer
是在同一层级的。您要做的是让 fade
保持在同一水平,但也让它在上面的水平,这是不可能的。这就像试图同时出现在建筑物的两层楼,这是不可能的。
虽然您需要的与本文没有直接关系,但 Philip Walton 在 z-indexes and the effect opacity has on them 上发表了一篇很棒的帖子,这可能对查看此问题的其他人有用。
关于css - 是位置 : fixed z-index relative to its parent's z-index?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19841997/