html - z-index 在位置固定元素内不起作用

Question

我有一个 div，它的位置是固定的，另一个 div 在位置固定的 div 里面，它是相对位置的

<div class="wrap">
    <div class="content">
    </div>
</div>

CSS 是:

.wrap{
    position: fixed;
    width:80%;
    height:200px;
    background-color:#a157df;
    z-index:5;
}
.content{
    position: relative;
    width:30%;
    height:100px;
    background-color:#a1a7af;
    left:80%;
    z-index:1;
}

示例在这个 link 中:

如何将第二个 div 放在第一个 div 中，我使用了 z-index 但它不起作用

Answer 1

我认为您不需要 z-index。这个怎么样？

.wrap {
position: fixed;
width: 80%;
height: 200px;
background-color: #a157df;
}
.content {
position: relative;
width: 30%;
height: 100px;
background-color: #a1a7af;
left: 70%;
}

如果您需要，这就是 z-index 的工作方式。 http://www.w3schools.com/cssref/pr_pos_z-index.asp