CSS3笔记之定位篇z-index

在CSS中，z-index属性主要用于管理定位元素（即position属性值为relative、absolute、fixed或sticky的元素）的堆叠顺序。元素的z-index值越大，它就越位于顶层。

注意，z-index只能应用于相对定位的元素，即position属性值为relative、absolute、fixed或sticky的元素。此外，每个元素都有一个默认的z-index值，通常是0，除非它是一个 positioned元素，在这种情况下，它的默认值是auto。

以下是一些使用z-index的示例：

/* 示例1 */
.first-element {
  position: relative;
  z-index: 10;
}
 
.second-element {
  position: relative;
  z-index: 5;
}
 
/* 示例2 */
.container {
  position: relative;
}
 
.first-child {
  position: absolute;
  z-index: 10;
}
 
.second-child {
  position: absolute;
  z-index: 20;
}
 
/* 示例3 */
.overlay {
  position: fixed;
  z-index: 1000;
}

在示例1中，即使.second-element在HTML结构中先定义，由于其z-index值小于.first-element，因此.first-element将显示在.second-element之上。

在示例2中，即使.first-child在HTML结构中先定义，由于.second-child的z-index值大于.first-child，.second-child将显示在.first-child之上。

在示例3中，.overlay拥有较高的z-index值，因此即使它不是最后定义的元素，它也会显示在其他元素之上。

请注意，z-index只在父元素的z-index值都相同的情况下才会发挥作用。如果父元素的z-index值较高，则子元素无论z-index设置多高都无法显示在其父元素之上。