z-index定位

Question

我有两个div，嵌套，并希望将图像放在inner-div的内容前面，以便看起来像边缘的装饰（大部分都是透明的。）

我认为使用z-index和绝对定位可以做到，但它没有用。我的简单测试是使用两个嵌套的div，每个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应位于内部项目上，它从FIRST外部项目中获取其参考点，该项目具有“position：relative”，否则它假定BODY为（0,0）。

Answer 2

z-index不适用于“position：relative”;

写相同的两个div而不是嵌套，然后将“position：absolute”放到两者。

要定位它们，请设置顶部，左侧，右侧和底部css属性。

然后你可以使用z-index来说明将在顶部显示div。