固定位置父子元素,中间有另一个固定元素

时间:2016-03-26 23:21:25

标签: html css

我正在使用javascript库在我的应用程序中创建模态窗口。

我有一个问题,其中有2个div,A和B(A是B的父级)两个位置:固定。 Div A的z-index:1和Div B z-index:3。

我想要另一个div,C,也有固定位置但在这两个外部,位于它们之间(使用z-index:2),但它最终位于所有位置之上。显然,子div(B)z-index根本不重要,总是保持在div C的底部..

我在这里用样本制作了一个JSBIN:

http://jsbin.com/koyasu/edit?html,css,output

2 个答案:

答案 0 :(得分:1)

这就是z-index的工作原理。父div为它及其所有子节点设置图层。设置z-index的孩子只会更改其父级内的图层。

你必须为这个重构你的DOM,我很害怕。

答案 1 :(得分:0)

固定位置总是指视口,所以你也可以选择DIV" B"超出" A",在同一级别获得三个固定元素。然后z-index可以应用得更加可靠。