html - z-index 定位

Question

我有两个嵌套的 div，我想在内部 div 的内容前面放置一个图像，以便看起来像边缘周围的装饰(大部分是透明的。)

我认为使用 z-index 和绝对定位可以做到这一点，但没有奏效。我的简单测试是使用两个嵌套的 div，每个都有一个背景图像，并尝试通过更改 z-index 值来控制哪个在前面。没有快乐 - 我做错了什么？

<style type="text/css">
        div
        {
            width: 300px;
            height: 300px;
            border: solid 1px black;
            background-repeat: no-repeat;
            background-position: 0px;
        }
</style>

<div style="background-image: url(coffee1.png); z-index: 3; position: absolute; left: 0px; top: 0px;">
</div>
<div style="background-image: url(coffee2.png); z-index: 1; position: absolute; left: 0px; top: 0px;">
</div>

谢谢，

马特。

Answer 1

您的 DIV 没有尺寸。它有背景图片，而不是 IMG 标签，所以你的 DIV 不知道你想要它有多大。

position:relative 应该在外部项上 - 这给出了对内部项的引用点，表示“我是新的 (0,0)”

position:absolute 应该在内部元素上，它的引用点来自第一个具有“position:relative”的外部元素，否则它假定 BODY 是 (0,0)。