z-index
默认情况下, 网页是一个二维空间, 并根据在 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 属性的值可以不必连续, 换句话说, 102030 与 123 的作用相同把数值拉开一些, 更便于以后把更多的元素插入到堆叠中如果两个元素的 z-index 属性值相同, 则保持原有的堆叠关系如果确保定位元素的上层不会出现任何内容, 就可以给它设置一个相当大的 z-index 值
需要注意的是, z-index 属性只对绝对定位相对定位或固定定位的元素有效, 对静态定位的元素无效
来源: https://www.2cto.com/kf/201802/722395.html