[英]CSS3 z-index issue
Sorry for such a "dummy" question but I really couldn't find a solution. 很抱歉遇到这样一个“虚拟”问题,但我确实找不到解决方案。
I have illustrated the situation graphically: 我以图形方式说明了这种情况:
Inside the container
, there are TWO siblings ( RED <div>
and BLUE <div>
). container
内部有两个同级( RED <div>
和BLUE <div>
)。 Both have position: absolute;
两者都有
position: absolute;
RED has z-index:1;
RED的
z-index:1;
BLUE has z-index:2;
蓝色的
z-index:2;
RED 's child ( GREEN ) has position:relative;
RED的孩子( GREEN )的
position:relative;
and z-index:99;
和
z-index:99;
Thank you! 谢谢!
UPDATE 1. Here is the fiddle 更新1。这是小提琴
The key to solve that is in the article linked by sudhAnsu63 : 解决问题的关键在sudhAnsu63链接的文章中:
New stacking contexts can be formed on an element in one of three ways:
可以通过以下三种方式之一在元素上形成新的堆叠上下文:
When an element is the root element of a document (the element)
当元素是文档的根元素时(该元素)
When an element has a position value other than static and a z-index value other than auto
当元素的位置值不是静态的并且z索引值不是auto时
When an element has an opacity value less than 1
当元素的不透明度值小于1时
But the interpretation is just the opposite . 但是解释恰恰相反 。 To set the blue element between the red and the green, the red one can not generate a stacking context.
要将蓝色元素设置在红色和绿色之间,红色不能生成堆叠上下文。 It is generating an stacking context because of the second rule;
由于第二条规则,它正在生成堆栈上下文。 it has position absolute an z-index different from auto.
它的绝对位置z索引与自动索引不同。
So, the solution is: 因此,解决方案是:
#red{
z-index:auto;
}
This won't work since Red's z-index is lower than blue. 由于红色的z-index值低于蓝色,因此此方法无效。 z-index only works with elements with a common root element.
z-index仅适用于具有共同根元素的元素。
Check out the Stacking Contexts part in this article 退房的堆叠内容部分这篇文章
Here the Blue div and the Red div is the direct child of container div. 在这里,蓝色div和红色div是容器div的直接子级。 z-Index will not work exactly.
z-Index不能完全正常工作。
try changing the opacity of blue div to 0.99; 尝试将blue div的不透明度更改为0.99;
.bluediv {
opacity: .99;
}
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/ http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-物业-A-全面,外观/
yeah, this is not possible because child elements inherit the z-index of the parent. 是的,这是不可能的,因为子元素继承了父元素的z-index。 so it does not make sense to give the green div a z-index of 99 because it's z-index is only valid inside the parent (red div).
因此将绿色div的z-index设为99是没有意义的,因为它的z-index仅在父级(red div)内部有效。 So if you give a container a certain z-index lets say 20, the z-indexing inside this container starts again from 0. this is a good thing because otherwise we had to give all children a z-index of minimal 21 or they won't be visible.
因此,如果您给某个容器指定一个z索引(假设为20),则该容器内的z索引会再次从0开始。这是一件好事,因为否则我们必须给所有子项赋予最小21的z索引,否则他们将不可见。 the first container on a web page is the body tag, you can stack all its children with the z-index property starting from layer 0 (z-index 0).
网页上的第一个容器是body标签,您可以使用从0层(z-index 0)开始的z-index属性堆叠其所有子级。 just like the body tag every child has its own z-index "system" unrelated to higher elements in the DOM.
就像body标签一样,每个孩子都有与DOM中较高元素无关的自己的z-index“系统”。 so the z-indexing starts over from 0 inside a parent container with its own defined z-index.
因此,在具有自己定义的z-index的父容器内,z-indexing从0开始。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.