揭秘CSS(第 1 版)
5.2.3 z-index
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

普通流

定位

绝对定位

相对定位

z-index

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

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

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

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

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

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

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

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验