z-index未正确编制索引 [英] z-index not indexing properly
本文介绍了z-index未正确编制索引的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
好吧，所以这段代码在div中生成两个块。顶部块应该越过底部块，因为顶部具有较高的z-index，但是当我给底部块顶部：-30px它在顶部块之上。
Alright, so this code generates two blocks in a div. The top block should go over the bottom block because the top has a higher z-index, but when I give the bottom block a margin-top: -30px it goes above the top block.
<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>
如何让顶部块在底部块之上？
How do I get the top block to go above the bottom block?
推荐答案
z-index 属性仅适用于定位的元素。
您可以添加 position：relative ，它会按预期工作（示例）。
You could add position: relative and it will work as expected (example).
position 属性的默认值为 static 为什么它不工作。
The default value of the position property is static, which is why it wasn't working.
这篇关于z-index未正确编制索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
