z-索引和堆叠；从堆栈上下文中删除子级

Question

Answer 1

您的规则并没有真正应用于您希望它们应用的元素。您需要在要定位的元素上显式设置 z 索引，在您的情况下，该元素是 block2 的 div 子元素。通过简单地修改第一个选择器：

#block1, #block2 , #block3 {

到

#block1, #block2 div, #block3 {

您的堆叠顺序已更正。您的 z-index 规则应用于父级，而子级继续使用默认的 auto。在您的情况下，通过设置 #block2 div 上的位置，您可以允许您的小部件位于 block2 子 div 的顶部。

Answer 2

我想你不需要改变

#widget

的位置。在我看来，答案就在于你的问题本身。看看这个

编辑CSS：

#block1{
    background-color: #abc;
    color: #123;
    z-index:3;
}

#block3 {
    background-color: #abc;
    color: #123;
    z-index:1;
}

Answer 3

一个可行的解决方案是使用 div 的

position

堆叠顺序，而不是在此处使用 z-index。因此不会形成不需要的堆叠上下文。

块 1 和 3 获取默认值

position: static

块 2 得到

position: relative

（超过 1 和 2）

并且只有小部件才会获得 z 索引，这会将其移动到所有部件之上！