CSS 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 属性的值可以不必连续，换句话说，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 上开源。

CSS z-index属性相关推荐

HTML中z index属性是用来,css中z-index 属性与用法详解
Z-index属性决定了一个HTML元素的层叠级别.元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部.这个层叠顺序沿着垂 ...
html5 index属性,深入理解CSS z-index属性
当你打开一个HTML页面的时候,你会不会注意到其实页面上的元素都是处于3D空间中的?HTML页面上的每一个元素不仅有X轴和Y轴属性,它还具有Z轴属性. CSS属性margin.float和其它位置属性 ...
【拼爹坑爹不比爹】深入理解css中position属性及z-index属性
总结:拼爹坑爹不比爹 1,定位移动:距左上角left+top;(移动后对于移动前:如果值为负数,则直接换成整数:如果值为整数,则直接改变相对方向.) 2,单一父元素不设值,子z-index才奏效:&q ...
html笔记（一）html4+css2.0、css基础和属性、盒模型
w3c 官网这里是 html4 的内容大标题小节一.关于HTML 1. 基本语法 2. HTML常用标签 3. 相对路径和绝对路径二.css基础 1. 表单元素 2. 创建样式表 3. cs ...
不规则裁剪图片css,使用CSS的clip-path属性实现不规则图形的显示
clip-path CSS 属性使用裁剪方式创建元素的可显示区域.区域内的部分显示,区域外的隐藏. 例子 div { width: 200px; height: 200px; background: ...
CSS基础标签属性及案例
CSS基础 CSS:cascading style sheets,层叠样式表格:CSS起到装饰作用,将不同功能的代码做分离,方便维护:可以大大提高工作效率,将HTML代码和样式代码分离: 1. 书写规 ...
CSS 动画相关属性动态实例大全（82种），2023年祝福第二弹（送你一只守护兔）(下），守护兔源代码免费下载
2023年春节祝福第二弹--送你一只守护兔(下) CSS 动画相关属性动态实例大全(82种).守护兔源代码免费下载本文目录: 五.CSS3 动画相关属性实例大全 (1).CSS3的动画基本属性 (2 ...
CSS的clip-path属性使用
前言 clip-path CSS 属性使用裁剪方式创建元素的可显示区域.区域内的部分显示,区域外的隐藏. 基本语法 clip-path: clip-source | basic-shape | geo ...
css设置float,【CSS】float属性
float浮动属性 1.作用: 将页面元素浮动起来,使其能够向左或者向右排列 2.应用: 实现页面中布局的左右排版实现图文环绕的版式效果 3.值: 4.原理: 浮动元素将脱离默认的文档流,漂浮在默认 ...
CSS的浮动属性，3面直接拿到offer
02 目录下面是这篇文章的目录结构,一般比较简单的问题我就一笔带过了,主要是分享一下比较有难度的知识点,答案来自网上,如果有版权问题我会删除.还有本文只是给出一个大概的知识点,如果想要深入学习还要靠 ...

CSS z-index属性

CSS z-index属性相关推荐

最新文章

热门文章