auto、0 和无 z-index 之间的区别

1. 概述

在CSS中，z-index属性指定一个元素的堆叠顺序。但是，当我们没有设置z-index属性时，会发生什么呢？这是本文要探讨的问题。我们将会比较三种情况：设置了auto、设置了0和没有设置任何值。

2. 设置了auto

当一个元素的z-index属性值被设置为auto时，浏览器会自动为其确定一个堆叠顺序。该元素的堆叠顺序将根据其在HTML中的位置来确定，位于后面的元素将堆叠在前面的元素之上。

.one {
  background-color: red;
}
.two {
  background-color: blue;
  position: absolute;
  top: 50px;
  left: 50px;
}
.three {
  background-color: green;
  position: absolute;
  top: 100px;
  left: 100px;
}
// HTML代码结构
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

上面的代码分别给三个div设定了不同的颜色，并通过position属性将它们定位到不同的位置。然后，我们没有为它们设置z-index属性，而是使用了auto。这将会产生以下效果：

可以看到，div.two在div.three的上面，但在div.one的下面。这是因为div.two在HTML中位于div.three的前面，位于div.one的后面。

3. 设置了0

当我们为一个元素的z-index属性设置了0时，这个元素将被放置在普通的文档流中，并且不会显示出任何堆叠效果。

.one {
  background-color: red;
}
.two {
  background-color: blue;
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 0;
}
.three {
  background-color: green;
  position: absolute;
  top: 100px;
  left: 100px;
}
// HTML代码结构
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

在上面的代码中，我们仍然定义了三个div元素，但是这次我们设置了div.two的z-index属性为0。下面是结果：

可以看到，div.two并没有被堆叠在其他元素的上面，而是显示在了最底层。

4. 没有设置任何值

最后一种情况是没有设置z-index属性。当我们没有为一个元素设置z-index属性时，它的堆叠顺序将根据其在HTML中的位置、display属性、position属性和float属性来确定。

具体来说：

非定位元素（如<div>）的默认z-index为auto。

定位元素（如<div style="position:absolute">或<div style="position:relative">）的默认z-index为0。

默认情况下，float元素会堆叠在非float元素之上。

如果两个元素具有相同的z-index值，它们的堆叠顺序将由它们在HTML中出现的顺序决定。

以下是一个例子：

.one {
  background-color: red;
  float: left;
  width: 50%;
}
.two {
  background-color: blue;
  float: right;
  width: 50%;
}
.three {
  background-color: green;
  position: relative;
  top: 50px;
  left: 50px;
}
// HTML代码结构
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

上述代码创建了三个div元素，分别定位于网页的两个侧面和中央。div.one和div.two被设置为float，而div.three被设置为relative定位。我们没有设置它们的z-index属性。这将产生以下效果：

由于div.one和div.two的float属性，它们被堆叠在了div.three的上面，而由于div.one先在HTML中出现，所以它在div.two的上面。

5. 总结

总的来说，当一个元素的z-index属性没有被设置时，它的堆叠顺序将由元素在HTML中的位置、display属性、position属性和float属性等因素决定。如果一个元素的z-index属性被设置为auto，那么它的堆叠顺序将由其在HTML中的位置来决定。如果一个元素的z-index属性被设置为0，那么它将不会显示出任何堆叠效果。