z-index定位

Question

我有两个div，嵌套，并希望有一个图像放在内部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

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

编写相同的两个div但不嵌套，然后将“position：absolute”放到两个div中。

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

然后你可以使用z-index来表示哪些div会显示在最上面。

Answer 2

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

position:relative应该是外项目 - 这使的参考项目内的一个点，他说，“我是新的（0,0）”

position:absolute应该在内部项目，它需要其来自具有“位置：相对”的第一外部项目的参考点，否则它假定BODY是（0,0）。