logo标签列表

Z-index绝对定位背景图像

cssbackground-imagecss-positionz-index
7
我希望将Wrapper-Top层置于其他层之上。我已经设置了z-index和position，应该足够了。我是否遗漏了什么？这是网站链接：谢谢。
编辑：以下是我使用的代码：
<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;
}
请仅贴出相关代码。不要发布外部链接。 - Anirudh Ramanathan
3个回答
7
您在.Wrapper-Top上缺少一个位置属性。
请参考MDN上的z-index文档。

初始值: auto

适用于: 具有定位属性的元素

继承性: 否

当该属性不存在时，您在.Wrapper-Top中的z-index:20是无效的。
明白了...我以为元素只有在指定位置（如顶部和左侧）时才会被定位。 - user2330401
0

我想这就是您想要的。

<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;
}
谢谢，我没有想到过！ - user2330401
0

使用绝对定位，并为此设置最高的z-index值，以使其置于另一个元素之上。就像这样

.Wrapper-Top{top: 0px; left: 0px; position:absolute; z-index: 2; }
.Wrapper-Middle{top: 160px; left: 0px; position: absolute; z-index: 1;}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接