HTML中设置元素层级

在HTML中，通过设置元素的position属性，可以控制元素之间的层级关系。

下面是一些常见的position属性值：

    position: static;
       // 默认值，元素按照 HTML 文档流排列    position: relative;
     // 相对于自己本来的位置设置定位    position: absolute;
     // 相对于父元素位置设置定位    position: fixed;
    // 永远固定在浏览器窗口的位置    

使用position属性，可以将元素设置为“定位元素”。同时，可以通过z-index属性，控制这些定位元素的层级关系。

z-index属性接受一个正整数值，层级值越大的元素就越在上层。

例如，下面的代码定义了三个定位元素，层级关系如图所示：

    #container {
          position: relative;
          z-index: 1;
    }
    #element-1 {
          position: absolute;
          z-index: 2;
    }
    #element-2 {
          position: absolute;
          z-index: 3;
    }
        

在上面的代码中，#container元素是一个相对定位元素，z-index 值为 1。而#element-1和#element-2元素是绝对定位元素，分别位于#container的上层和上上层。

需要注意的是，z-index属性只对定位元素有效。如果元素没有设置定位属性，z-index属性无效。

细心的读者可能已经发现，在上述代码中，#container元素没有设置position属性，为什么它还能够设置z-index属性呢？原因是，z-index属性只对有定位属性的元素有效，但是如果一个元素的子孙元素有定位属性，那么这个元素也可以设置z-index属性，但必须设置为auto。这样，父元素和子孙元素就可以按照正确的层级关系排列了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！