CSS Z-Index详解

一、Z-Index是什么?

Z-Index是CSS中的一个属性,它控制HTML中的元素在z轴方向上的显示顺序。根据Z-Index的指定，我们可以轻松地控制元素在不同层级里的显示顺序。

Z-Index是一个数字，其取值范围为整数、负数和0，数值越大，就越在上层，反之则越在下层，当数值相等时，则按照HTML的书写顺序来决定谁在上层。

二、怎样设置Z-Index值？

Z-Index的设置有以下几种方式：

1、全局默认值

默认情况下，所有元素的Z-Index属性都相同，可设置global属性，全局设定所有元素的Z-Index值：

    
    *{
     z-index:1;
    }
    

2、单个元素设置Z-Index

可针对单个元素设定自己的Z-Index值：

    
    .element {
      z-index: 99; 
    }
    

3、父元素控制多个子元素的层级顺序

父元素的Z-Index属性优先于它内部的子元素：

    
    .parent{
     z-index:2;
    }
    .child{
     z-index:1;
    }
    

三、如何理解z轴方向

平时我们都将页面元素分为x、y轴方向来考虑，那么z轴方向在页面中存在吗？

答案是存在的。在HTML文档中，元素根据其位置来确定它的大小和形状，并放置在页面的特定位置上。HTML中的每个元素都是三维对象，拥有高度、宽度和深度。深度掌管着元素究竟位于哪个元素之前或之后。

四、比较典型的使用场景

1、弹出层

弹出层一般需要置于最上层。可以使用如下代码实现:

    
    .mask-1 {
      z-index: 99; 
    }
    .popup-1 {
      z-index: 100; 
    }
    

2、导航栏下拉菜单

导航栏下拉菜单一般需要置于内容下面，在其它组件上面。可以使用如下代码实现：

    
    .header {
      position: relative; 
      z-index: 100; 
    }
    .dropdown-menu {
      position: absolute;
      top: 100%;
      z-index: 99;
    }
    

3、轮播图

轮播图可能会与其他元素重叠，一般需要设置较高的Z-Index值。

    
    .carousel {
      z-index: 1; 
    }
    .layer {
      z-index: 2; 
    }
    

五、常见问题及解决方案

1、设置Z-Index后元素仍然无法前置？

答案是，有可能该元素的布局上下文出现问题。此时可能需要修改该元素的定位方式或者修改其父元素的属性。

2、Z-Index是否受position属性限制？

是的，只有定位元素（position的值不为static）才能获得z-index值。

小结

Z-Index是一种控制页面元素显示层级的CSS属性，常用于解决页面布局上的重叠问题。通过设置元素的Z-Index值，可以改变元素在z轴方向上的显示顺序。避免出现问题的方法则是找到问题所在，改正问题可能出现的原因。