位置:相对于其父级的z-index是固定的z-index吗? [英] Is position: fixed z-index relative to its parent's z-index?
问题描述
我在一个相对定位的元素内有一个固定位置的元素，据我所知，position: relative元素对position: fixed不应该有任何影响(固定元素是相对于窗口定位的，对吧? ).
I have a fixed position element inside a relatively positioned element, as far as I'm concerned the position: relative element shouldn't have any effect on the position: fixed (fixed elements are positioned relative to the window, right?).
但是，固定元素的z-index似乎是由其父级继承的，以至于它的z-index不能高于其父级的z-index.
However, the fixed elements z-index seems to be inherited by it's parent, to the point where it's z-index can be no higher than its parent's z-index.
我希望我有道理?下面是我正在谈论的HTML示例:
I hope I'm making sense? Below is a HTML example of what I'm talking about:
.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元素出现在渐变元素的前面.
Then the .inner element appears in front of the fade element.
我发现这种行为非常特殊...有没有一种方法可以解决此问题而无需移动.inner div或更改.outer div的CSS?
I find this behaviour very peculiar... is there a way of working around this without moving the .inner div, or changing the CSS of the .outer div?
上述代码示例的提要:
推荐答案
简而言之，是的，在定义了父级z-index的情况下，具有position:fixed的元素受其父级的z-index限制.
In short, yes, an element with position:fixed is limited by its parent's z-index given the parent's z-index is defined.
遗憾地通知你，但你想要的是目前还不可能.获得所需效果的唯一方法是更改HTML 或从outer删除z-index .
Sad to inform you, but what you want is not currently possible. The only way you can get the effect you desire is to change your HTML or remove the z-index from outer.
更改HTML选项
第一种选择是将inner移到outer之外，这看起来像 一样这个 .
The first option is to move inner outside of outer, which would look like this.
HTML修复的第二个选项是将fade移到outer内(甚至使用相同的CSS)-
The second option for an HTML fix is to move fade inside of outer (using the same CSS even) - demo of that here.
第三个选择是将fade放在outer内，然后还将inner放在fade内，但这要求您使用rgba颜色和不透明度- 可以在此处找到该演示 .
A third option would be to put fade inside of outer and then also put inner inside of fade, but that requires you to use rgba colors and opacity - that demo is found here.
更改CSS选项
使用当前具有的相同HTML可以获得的最接近的东西是删除outer的z索引-
The closest thing you can get using the same HTML you have currently is to remove the z-index of outer - Demo here. You would think that you could simply increment each element's z-index by two, but that does not work due to the fact that children elements cannot have a higher z-index than their parents (if the parent's z-index is set).
考虑一下，fade和outer处于同一级别.您想做的是让fade保持在同一级别，但也保持在上述级别，这是不可能的.就像试图一次进入建筑物的两层楼一样，这是不可能的.
If you think about it, fade and outer are on the same level. What you're trying to do is have fade remain on that same level but also have it be on the level above, which is impossible. It's like trying to be on two floors of a building at once, it can't be done.
尽管您所需的内容与本文没有直接关系，但Philip Walton在
Although what you need is not directly related to this article, Philip Walton created a great post on z-indexes and the effect opacity has on them, which could be useful to others looking at this question.
这篇关于位置:相对于其父级的z-index是固定的z-index吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
