z-index 一个 div 在另一个里面

Question

标题可能有点误导，但我不知道如何正确表述我的问题... 所以这里是：

.header {
 height:1000px;
 width:400px;
 background-color:red;
 z-index:0;
    color:blue;
}
.text {
    position:fixed;
}
.page {
 height:1000px;
 width:400px;
 padding:20px;
 background-color:black;
 z-index:0;
}

.container {
 height:150px;
 width:350px;
 background-color:white;
 z-index:20;
}

<div class="header"><span class=text>Hello</span></div>

<div class="page ">
 <div class="container"></div>
</div>

所以我想在这里做的很简单，在红色和黑色 div 上面有 "Hello" 文本，因为它已经存在，但是在白色 div...我认为这只是 z-indexes 的问题，但我想不出办法...

Answer 1

.container {
    height: 150px;
    width: 350px;
    position: relative;
    background-color: white;
    z-index: 20;
}

只需将 position:relative 属性添加到 .container div :)

z-index 一个 div 在另一个里面

z-index a single div inside another one

html

css

z-index