[分享]css中如何设置z index

在css中，zindex属性决定了一个元素在其兄弟元素中的层级，也就是说，zindex属性可以决定一个元素在其他元素上面还是下面，为当前元素创建了一个“图层”，它可以通过控制元素的堆叠顺序来改变覆盖其...

在css中，z-index属性决定了一个元素在其兄弟元素中的层级，也就是说，z-index属性可以决定一个元素在其他元素上面还是下面，为当前元素创建了一个“图层”，它可以通过控制元素的堆叠顺序来改变覆盖其他元素的行为。

可以对同一元素进行多次的z-index设置，后面的设置会覆盖前面的设置值，它接受的的数值可以是整数、负数、auto和inherit。其中，数值越大的元素会在数值较小的元素上面显示，但是，如果z-index的值是负数，元素会被放到整个堆栈的最底层，而使用auto会使用父元素的z-index属性的值。

/*在css中设置元素z-index*/
#box1 {
  z-index: 2;
}
#box2 {
  z-index: 1;
} 

上述代码会将id为box1的元素放在id为box2的元素上面，因为box1的z-index值更高。

需要注意的是，z-index只对设置了定位（position）属性的元素生效，同时切勿使用过多的z-index值，应尽量避免多层嵌套。

总的来说，z-index对于布局中的层叠效果具有很大的优化价值，合理地使用z-index可以让页面更加美观、直观。