美文网首页
CSS中的z-index

CSS中的z-index

作者: DannyCloud | 来源:发表于2018-09-04 00:51 被阅读0次

前置知识:

(1)所有的盒模型元素都处于三维坐标系中。 除了常用的横坐标和纵坐标, 盒模型元素还可以沿着“z轴”层叠摆放, 当它们相互覆盖时, z轴层叠顺序就变得十分重要。

(2)z-index只对定位元素有作用。

1、默认层叠顺序(7阶层叠水平)

底层到外层依次时 

(1) 根元素的background和border

(2) z-index为负

(3) block块状盒子

(4) float浮动元素

(5) inline/inline-block水平盒子

(6) z-index为auto/0,或不依赖于z-index的层叠上下文(即定位元素没有指定z-index的时候,默认在此层渲染。)

(7) z-index 为正

2、层叠上下文(与块级格式化上下文BFC性质相似)

注:层叠上下文可以使底层元素上升到与相邻上层元素同级,然后再根据后来者居上原则。(层递上下文的使用必须是相邻的两层,隔层无法比较)。

2.1   下面这两个是层叠领域的黄金准则。当元素发生层叠的时候,其覆盖关系遵循下面2个准则:

谁大谁上:当具有明显的层叠水平标示(不在同一级别上)的时候,如识别的z-indx值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。

后来居上:当元素的层叠水平一致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。

转载自:https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/

2.2    层叠上下文的触发方式:

(1)根元素 (HTML)

(2)z-index 值不为 "auto"的 绝对/相对定位

(3)一个 z-index 值不为 "auto"的 flex 项目 (flex item),即:父元素 display: flex|inline-flex。(需满足两个条件才能触发:1是父级需要是display:flex或者display:inline-flex水平,2是子元素的z-index不是auto,必须是数值。则这个子元素为层叠上下文元素)

(4)opacity 属性值小于 1 的元素(参考 the specification for opacity)

(5)transform 属性值不为 "none"的元素

(6)mix-blend-mode 属性值不为 "normal"的元素

(7)filter值不为“none”的元素

(8)perspective值不为“none”的元素

(9)position: fixed

(10)isolation 属性被设置为 "isolate"的元素

(11)在 will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值

(12)-webkit-overflow-scrolling 属性被设置 "touch"的元素

参考:https://www.cnblogs.com/CCCLARITY/p/8290403.html

https://segmentfault.com/a/1190000007051005

相关文章

  • 层叠上下文与层叠顺序-Z-index

    CSS中Z-index属性 z-index属性的定义是设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序...

  • css的层叠

    css2的css的层叠 《css世界》的读书笔记,非原创。背景是css2。 z-index只是层叠规则中的一个属性...

  • CSS深入理解之z-index 笔记

    z-index 与 css 定位属性 z-index 只对定位元素有作用。 如果定位元素z-index没有发生嵌套...

  • CSS中的z-index

    前置知识: (1)所有的盒模型元素都处于三维坐标系中。 除了常用的横坐标和纵坐标, 盒模型元素还可以沿着“z轴”层...

  • 2019-06-26

    CSS3 网上推荐的CSS书写规范 1.位置属性 (position, top, right, z-index, ...

  • css中z-index层级

    1.z-index简介 (1) 概念 z-index属性指定了元素与元素之间的z轴上的顺序,而z轴决定元素之间发生...

  • z-index

    https://developer.mozilla.org/zh-CN/docs/Web/CSS/z-index ...

  • CSS书写规范、顺序

    CSS书写顺序 1.位置属性(position, top, right, z-index, d...

  • 海枫科技前端编码风格规范之CSS规范

    CSS书写顺序 位置属性(position,top,right,z-index,display,float等) 大...

  • uni-app设置页面背景及背景图片

    代码如下 ```` css .set-bg { z-index:-1; width:100%; height:10...

网友评论

      本文标题:CSS中的z-index

      本文链接:https://www.haomeiwen.com/subject/byewwftx.html