Question

我希望将Wrapper-Top图层放在另一个图层的顶部。我设置了Z-index和position，这应该足够了。我错过了什么吗？这是website：提前谢谢。

编辑：这是我使用的代码：

<body>
  <div class="Wrapper-Top">
  </div>
  <div class="Wrapper-Middle">
  hjklhjkhkjlhjkl
  </div>
</body>

.Wrapper-Top{ min-width: 980px; width: 100%; height: 179px; top: 0px; left: 0px; background:url(img/header-bg.png) repeat-x 50% 0%; z-index: 20; }
.Wrapper-Middle{ min-width: 980px; width: 100%; height: 300px; margin: 0 auto; background: #eee; top: 160px; left: 0px; position: absolute; z-index: 10; text-align: center; }

Answer 1

您.Wrapper-Top上的缺少位置属性。

z-index on MDN

初始值：自动

适用于：定位元素

继承：否

如果不存在，z-index:20中的.Wrapper-Top无效。

Answer 2

我认为这就是你想要的......

<body>

<div class="Wrapper-Middle">
hjklhjkhkjlhjkl
 </div>
 <div class="Wrapper-Top">
 </div>

.Wrapper-Top{ min-width: 980px;
 width: 100%;
height: 179px;
top: 0px;
left: 0px;
background: url(img/header-bg.png) repeat-x 50% 0%;
z-index: 20;
position: absolute;
 }

.Wrapper-Middle{min-width: 980px;
width: 100%;
height: 300px;  
margin: 0 auto;
background: #eee;
top: 0px;
left: 0px;
z-index: 10;
text-align: center;
}

Answer 3

使用绝对两者的位置，并给出最高的z指数值你想要的另一个。像这样

.Wrapper-Top{top: 0px; left: 0px; position:absolute; z-index: 2; }
.Wrapper-Middle{top: 160px; left: 0px; position: absolute; z-index: 1;}

Z-index绝对定位背景图像

3 个答案: