html开发CSSz-index解析

18-02-22 来源：[db:作者]

收藏我要投稿

默认情况下，网页是一个二维空间，并根据在DOM中的顺序，从左到右，从上到下，依次排列各个元素。

当页面上出现相对定位、或绝对定位、或固定定位的元素后，如果对一个元素设置了偏移，就很可能出现元素相互重叠的情况。如果把页面作为 x-y 轴，垂直于页面的方向就是 z 轴，重叠的情况就发生在 z 轴。

元素在 z轴的位置，取决于它在DOM中的先后顺序。如果两个元素发生重叠，在DOM中先出现的元素，通常排在后出现元素的下面，被后出现元素的覆盖。出现这种情况后，可以通过 z-index 属性来调整元素在 z 轴方向上的堆叠顺序。

z-index 属性的值为整数，可以为正数，也可以为负数，默认值为 0。在 z 轴方向上，定位元素就会按各自 z-index 属性的值，从小到大依次排列。z-index 属性的值越大，元素离用户越近。如图 5?20 所示：

图5-20 z-index属性示意图

z-index 属性的值可以不必连续，换句话说，10、20、30 与 1、2、3 的作用相同。把数值拉开一些，更便于以后把更多的元素插入到堆叠中。如果两个元素的z-index 属性值相同，则保持原有的堆叠关系。如果确保定位元素的上层不会出现任何内容，就可以给它设置一个相当大的 z-index 值。

需要注意的是，z-index 属性只对绝对定位、相对定位或固定定位的元素有效，对静态定位的元素无效。