Z-index绝对定位背景图答案

【问题标题】：Z-index absolute positioning background imageZ-index绝对定位背景图
【发布时间】：2013-05-19 17:59:07
【问题描述】：

我想将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;
}

【问题讨论】：

不要发布外部链接。贴出相关代码。

标签： css background-image css-position z-index

【解决方案1】：

我想这就是你想要的..

<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;
}

【讨论】：

谢谢，没想到！

【解决方案2】：

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

z-index on MDN

初始值：自动

适用于：定位元素

继承：否

当它不存在时，.Wrapper-Top 中的 z-index:20 什么也不做。

【讨论】：

知道了...认为元素在指定位置时被定位（如顶部和左侧）。

【解决方案3】：

两者都使用绝对位置，并给出你想要的最高 z-index 值。像这样

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

【讨论】：