Question

好吧，所以这段代码在div中生成两个块。顶部块应该越过底部块，因为顶部有一个更高的z-index，但是当我给底部块一个margin-top：-30px时它会超过顶部块。

<html>
<head></head>
<body>
    <div style="width: 300px; height: 90px; overflow: hidden;">
        <div style="width:300px; height: 50px; z-index: 2; background-color: #ff0000;">
        </div>

        <div style="width:300px; height: 50px; z-index: 1; background-color: #ff00ff; margin-top: -30px;">
        </div>
    </div>
</body>
</html>

如何让顶部区块超越底部区块？

Answer 1

z-index属性only applies to positioned elements。

您可以添加position: relative，它将按预期工作(example)。

position属性的默认值为static，这就是它无法正常工作的原因。

Answer 2

在两个块的css中添加position:relative;：

<div style="width: 300px; height: 90px; overflow: hide;">
        <div style="position: relative; width:300px; height: 50px; z-index: 2; background-color: #ff0000;">
        </div>
        <div style="position: relative; width:300px; height: 50px; z-index: 1; background-color: #ff00ff; margin-top: -30px;">
        </div>
    </div>

http://jsfiddle.net/uu721kgc/

z-index没有正确索引

2 个答案: