CSS3笔记之定位篇z-index

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

注意，z-index只适用于相对定位的元素，即position属性值为relative、absolute、fixed或sticky的元素。

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

示例1：

#box1 {
  position: relative;
  z-index: 1;
}
 
#box2 {
  position: relative;
  z-index: 2;
}

在这个例子中，#box2将显示在#box1之上，因为它的z-index值更大。

示例2：

#box1 {
  position: absolute;
  z-index: 10;
}
 
#box2 {
  position: absolute;
  z-index: 5;
}

在这个例子中，即使#box2在HTML代码中先定义，#box1也会显示在#box2之上，因为它的z-index值更大。

示例3：

#box1 {
  position: relative;
  z-index: 1;
}
 
#box2 {
  position: fixed;
  z-index: 2;
}

在这个例子中，即使#box1的定位方式是relative，如果#box2的定位方式是fixed或sticky，#box2也会显示在#box1之上，因为fixed或sticky定位的元素总是显示在相对定位的元素之上。

注意：z-index只适用于同一个父元素中的定位元素，如果父元素的z-index值较小，子元素即使z-index值较大也无法显示在父元素之上。