html - CSS3 z-index 问题

标签 html css z-index

很抱歉提出这样一个“虚拟”问题,但我真的找不到解决方案。

我已经用图表说明了这种情况:

enter image description here

container内,有两个 sibling ( RED <div>BLUE <div> )。 两者都有 position: absolute;

REDz-index:1; 蓝色z-index:2;

RED 的 child (GREEN) 有 position:relative;z-index:99;

我想让绿色高于蓝色

谢谢!

更新1。这是 fiddle

http://jsfiddle.net/yn9z7/

最佳答案

解决这个问题的关键在 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

When an element has an opacity value less than 1

但解释恰恰是相反。要将蓝色元素设置在红色和绿色之间,红色元素无法生成堆叠上下文。由于第二条规则,它正在生成堆栈上下文;它的绝对位置和 z 索引与 auto 不同。

所以,解决办法是:

#red{
    z-index:auto;
}

demo

关于html - CSS3 z-index 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18687287/

相关文章:

javascript - 将滚动区域的顶部与 CSS 固定的重叠元素分开

html - CSS :before pseudo selector and increasing the area of an <a> tag

html - 如何在 Html 文件上传中隐藏文本字段

jquery - 单击列表中的任何元素后如何保持动态元素行为?

html - 如何防止我的横幅广告在网页上被截断,并获得自动滚动条?

css - z-index 是强制一个元素位于另一个元素之上的唯一方法吗?如果不是,还有哪些其他方法?

html - 图像背景高亮或 Z-index?

html - 为什么同样的font-family在IE和firefox下显示不同的风格?

html - HTML 中的 float 按钮

html - 背景颜色不适用于 z 索引元素