html - 如何让我的“但尼丁”Div 移到前面？

Question

我尝试过申请z-index: -1，但似乎没有任何效果：

HTML：

<div id="dunedin">
    Dunedin
</div>

CSS：

#dunedin {
    font-size: 200px; text-align: center;
    position: relative;
    z-index: -1; 
}

Answer 1

z-index像图层一样工作，您放置的数字越大，该对象将显示在顶部。

正如您在此示例中所看到的，由于文档流和大小，即使是红色通常也会与绿色重叠。一旦我们将z-index值提高，红色将显示在绿色 div 的顶部。

.a {
  position:absolute;
  width:300px;
  height:200px;
  background:red;
  z-index:1;
}


.b {
  position:absolute;
  width:400px;
  height:300px;
  background:green;
  z-index:0;
}

<div class="a"></div>
<div class="b"></div> 

Answer 2

为 z-index 提供正值，例如：

#dunedin {font-size: 200px; text-align: center; position: relative; z-index: 100; }

Answer 3

#dunedin1{
width:200px; 
height:200px;
float:left;
background-color:red;
text-align:center;
z-index:-2;
position:relative;
}
#dunedin2{
width:200px; 
height:200px;
float:left;
background-color:green;
text-align:center;
z-index:0;
position:relative;
}

#dunedin3{
width:100%; 
height:50px;
position:absolute;
top:60px;
left:60px;
background-color:blue;
text-align:center;
z-index:-1;
}

<div id="dunedin1">
Dunedin
</div>
<div id="dunedin2">
Dunedin
</div>
<div id="dunedin3">
Dunedin
</div>