Question

我为客户创建了广告原型。

，即使他们的z索引是正确的，我也无法在父母下面显示孩子。

请查看 - http://www.charuv.com/prototype/i4.html

问题的步骤

窗口滚动 - 向上滚动鼠标悬停在黑色背景上。
内容滚动 - 将鼠标悬停在设备模拟器上，该模拟器具有粗白边框。

完成上述操作后，您会看到以下视觉故障（不确定其是否可修复）

CSS问题

＃ad-box中的视频与超级父 - ＃get-frame重叠，但不与直接父＃c1重叠。所以结构就像 - ＃get-frame - ＆gt; ＃c1 - ＆gt; ＃广告框

CSS规则

以下是上述三个

#get-frame {
margin: 6% auto 0;
overflow: auto;
border-width: 72px 25px 63px;
border-style: solid;
border-color: #fff;
box-shadow: 0 0 50px rgba(0, 0, 0, .8);
border-radius: 50px;
z-index: 999999;
position: relative
}

#c1 {
z-index: 99999;
background-position: left top;
background-attachment: fixed;
background-image: url("blue.jpg");
background-attachment: fixed
}

#ad-box {
position: fixed;
margin: 11.5% 26.2%;
top: 0;
left: 0;
overflow: auto;
z-index: 99999
}

感谢您的时间。

Answer 1

从position: relative; z-index: 99999;移除#c1。这样就没有父上下文，固定位置#ad-box可以自由地与DOM结构中其他地方的z索引进行交互。

z-index不显示父项后面的嵌套子项

1 个答案: