Question

有两个容器。一个是固定的，覆盖100％的屏幕。第二是相对 - 包含可滚动内容。问题是有四个元素相对于彼此定位如下：第一个在固定容器中，第二个在绝对容器中，第三个固定，第四个是绝对容器。

<div class="container fixed">
    <div class="el z1"></div>
    <div class="el z3"></div>
</div>
<div class="container relative">
    <div class="el z2"></div>
    <div class="el z4"></div>
</div>

然而，其中一个父母的z-index将始终小于另一个，这不允许为4个子元素订购。

有小提琴http://jsfiddle.net/only_dimon/zkY4C/6/ 我想订购：黄色，绿色，白色，黑色从底部。但正如你所看到的 - 黄色，白色，绿色，黑色。

我想要的结果：
enter image description here

但元素应该在不同的容器中。

提前致谢！

这对我有帮助：对于许多元素只能帮助html重建。幸运的是，我不需要为固定元素使用固定容器，因为固定元素的位置和大小取决于窗口大小，即使我将它们放入相对容器中。

Answer 1

经过一些进一步的调查，子元素不能/不能假设能够否决父z-index，某些浏览器例如Firefox虽然由于某种原因忽略了父索引并显示你的元素是你希望但是每一个我试过的其他浏览器（Opera，Safari，Chrome）没有，所以不能在不改变HTML标记以实现跨浏览器兼容性的情况下完成你想要的东西。

修改：

你甚至可以在这个主题中找到相当多的帖子。

How can I get a child of an element with lower z-index on front of a child of another element with higher z-index?

How to get a parent element to appear above child

can I override z-index inheritance from parent element?

编辑 - 2：

根据你想要实现的目标，有许多替代方法可以获得假的“zindex”行为，值得一看的是pointer-events:none;以及透明的背景，你永远不会知道它在另一个之上元件。

如果是背景，你可以使用具有不同设置的盒子阴影来伪造它。

无法提出任何其他理由，但如果你告诉我，我会尝试给你一个解决方案。

此致

Answer 2

像这样：http://jsfiddle.net/9Hh89/1/？

这是我的HTML：

<div class="fixed">
    <div class="yellow">
        <div class="green">
            <div class="white">
                <div class="black"></div>
            </div>            
        </div>        
    </div>
</div>

和CSS：

html, body { height:100% }

body { padding:0 ;
    margin:0 ;
}

.fixed { height:100% ;
    min-height:100% !important ;
    background:#666666 ;
    position:relative ;
    z-index:1 ;
}

.yellow, .green, .white, .black {
    display:block ;
    margin:auto !important ;
    position:absolute ;
    top:0 ;
    bottom: 0 ;
    right: 0 ;
    left: 0 ;
}

.yellow { width:220px ;
    height:220px ;
    background:yellow ;
    z-index:100 ;
}

.green { width:170px ;
    height:170px ;
    z-index:200 ;
    background:green ;
}

.white { width:100px ;
    height:100px ;
    z-index:200 ;
    background:white ;
}

.black { width:50px ;
    height:50px ;
    z-index:300 ;
    background:black ;
}

最佳，

辛西娅

Chrome中不同父级元素的z-index

2 个答案: