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的顶部。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

如何让我的“Dunedin”Div转移到前线？

3 个答案: