4

有两个容器。一个是固定的，覆盖 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/ 我要订购：黄色，绿色，白色，底部的黑色。但正如你所见——黄色、白色、绿色、黑色。

我想要的结果：
在此处输入图像描述

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

提前致谢！

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

4

2 回答 2

3

经过进一步调查，子元素不能/不应该能够推翻父 z-index，某些浏览器（例如 Firefox）虽然由于某种原因忽略了父索引并显示您的元素是您希望的，但其他所有浏览器我'已经尝试过（Opera，Safari，Chrome）没有，所以不，如果不更改 HTML 的标记以实现跨浏览器兼容性，就不可能完成你想要的。

编辑：

您甚至可以在该主题中找到相当多的帖子。

如何在具有较高 z-index 的另一个元素的子元素前面获取具有较低 z-index 元素的子元素？

如何让父元素出现在子元素之上

我可以覆盖父元素的 z-index 继承吗？

编辑 - 2：

根据您想要完成的任务，有许多替代方法可以获得虚假的“zindex”行为，值得一看的是pointer-events:none;透明背景，您永远不会知道它在另一个元素之上。

如果它用于背景，您可以使用具有不同设置的框阴影来伪造它。

无法想出任何其他原因 atm 但如果您告诉我我也会尝试为您提供解决方案。

问候

于 2013-04-19T10:15:05.343 回答
0

像这样：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 ;
}

最好的，

辛西娅

于 2013-04-19T10:12:45.457 回答