标签:分享 基本 overflow image webkit width gre 它的 opacity
以往,由于自己使用z-index
的频率不大,所以对这个CSS属性存在比较片面的认识。一直认为z-index
就是用来描述定义一个元素在屏幕Z轴
上的堆叠顺序。z-index
值越大在Z轴
上就越靠上,也就是离屏幕观察者越近。最后才发现这个认识存在很大的问题:
z-index
属性值并不是在任何元素上都有效果。它仅在定位元素(定义了position
属性,且属性值为非static
值的元素)上有效果。Z轴
上的堆叠顺序,不仅仅是直接比较两个元素的z-index
值的大小,这个堆叠顺序实际由元素的层叠上下文、层叠等级共同决定。要想完全理解一个东西,首先要明白它是什么,也就是它的定义。我们先看看上面提到的层叠上下文
、层叠等级
、层叠顺序
都是什么?定义又太过抽象,后面会再用一个具象的比喻来
让你彻底明白它们到底是什么,有什么联系。
层叠上下文(stacking context),是HTML中一个三维的概念。在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的X轴
,Y轴
以及表示层叠的Z轴
。一般情况下,元素在
页面上沿X轴Y轴
平铺,我们察觉不到它们在Z轴
上的层叠关系。而一旦元素发生堆叠,这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。
如果一个元素含有层叠上下文,(也就是说它是层叠上下文元素),我们可以理解为这个元素在Z轴
上就“高人一等”,最终表现就是它离屏幕观察者更近。
那么,层叠等级指的又是什么?层叠等级(stacking level,叫“层叠级别”/“层叠水平”也行)
Z轴
上的上下顺序。Z轴
上的上下顺序。说到这,可能很多人疑问了,不论在层叠上下文中还是在普通元素中,层叠等级都表示元素在Z轴
上的上下顺序,那就直接说它描述定义了所有元素在Z轴
上的上下顺序就OK啊!为什么要分开描述?
为了说明原因,先举个栗子:
再类比回“层叠上下文”和“层叠等级”,就得出一个结论:
前面说了那么多,知道了“层叠上下文”和“层叠等级”,其中还有一个最关键的问题:到底如何产生层叠上下文呢?如何让一个元素变成层叠上下文元素呢?
其实,层叠上下文也基本上是有一些特定的CSS属性创建的,一般有3种方法:
HTML
中的根元素<html></html>
本身j就具有层叠上下文,称为“根层叠上下文”。position
属性为非static
值并设置z-index
属性为具体数值,产生层叠上下文。position
和z-index
属性<style> div { position: relative; width: 100px; height: 100px; } p { position: absolute; font-size: 20px; width: 100px; height: 100px; } .a { background-color: blue; z-index: 1; } .b { background-color: green; z-index: 2; top: 20px; left: 20px; } .c { background-color: red; z-index: 3; top: -20px; left: 40px; } </style> <body> <div> <p class="a">a</p> <p class="b">b</p> </div> <div> <p class="c">c</p> </div> </body>
z-index
,所以不会产生层叠上下文,所以.a、.b、.c都处于由<html></html>
标签产生的“根层叠上下文”中,属于同一个层叠上下文,此时谁的z-index
值大,谁在上面。
栗子2: 有两个div,p.a、p.b被包裹在一个div里,p.c被包裹在另一个盒子里,同时为两个div和.a、.b、.c设置position
和z-index
属性
<style> div { width: 100px; height: 100px; position: relative; } .box1 { z-index: 2; } .box2 { z-index: 1; } p { position: absolute; font-size: 20px; width: 100px; height: 100px; } .a { background-color: blue; z-index: 100; } .b { background-color: green; top: 20px; left: 20px; z-index: 200; } .c { background-color: red; top: -20px; left: 40px; z-index: 9999; } </style> <body> <div class="box1"> <p class="a">a</p> <p class="b">b</p> </div> <div class="box2"> <p class="c">c</p> </div> </body>
p.c
元素的z-index
值为9999,远大于p.a
和p.b
的z-index
值,但是由于p.a
、p.b
的父元素div.box1
产生的层叠上下文的z-index
的值为2,p.c
的父元素div.box2
所产生的层叠上下z-index
值为1,所以p.c
永远在p.a
和p.b
下面。
同时,如果我们只更改p.a
和p.b
的z-index
值,由于这两个元素都在父元素div.box1
产生的层叠上下文中,所以,谁的z-index
值大,谁在上面。
说完“层叠上下文”和“层叠等级”,我们再来说说“层叠顺序”。“层叠顺序”(stacking order)表示元素发生层叠时按照特定的顺序规则在Z轴
上垂直显示。
由此可见,前面所说的“层叠上下文”和“层叠等级”是一种概念,而这里的“层叠顺序”是一种规则。
background/border
"指的是层叠上下文元素的背景和边框。inline/inline-block
元素的层叠顺序要高于block
(块级)/float
(浮动)元素。z-index: auto
和z-index: 0
在同一层级,但这两个属性值本身是有根本区别的。inline/inline-block
元素的层叠顺序要高于block
(块级)/float
(浮动)元素?这个大家可以思考一下! 其实border/background
属于装饰元素的属性,浮动和块级元素一般用来页面布局,而网页设计之初最重要的就是文字内容,所以<style> .box1, .box2 { position: relative; z-index: auto; } .child1 { width: 200px; height: 100px; background: #168bf5; position: absolute; top: 0; left: 0; z-index: 2; } .child2 { width: 100px; height: 200px; background: #32c292; position: absolute; top: 0; left: 0; z-index: 1; } </style> </head> <body> <div class="box1"> <div class="child1"></div> </div> <div class="box2"> <div class="child2"></div> </div> </body>
.box1/.box2
虽然设置了position: relative
,但是z-index: auto
的情况下,这两个div
还是普通元素,并没有产生层叠上下文。所以,child1/.child2
属于<html></html>
元素的“根层叠上下文”中,z-index
值大,谁在上面。.box1/.box2
的z-index
属性值改为数值0
,其余不变。.box1, .box2 { position: relative; z-index: 0; }
.box1/.box2
的z-index
属性值改为数值0
,最终结果完全相反。这时.child2
覆盖在了.child1
上面。原因是什么呢?z-index: 0
后,.box1/.box2
产生了各自的层叠上下文,这时候要比较.child1/.child2
的层叠关系完全由父元素.box1/.box2
的层叠关系.box1/.box2
的z-index
值都为0
,都是块级元素(所以它们的层叠等级,层叠顺序是相同的),这种情况下,在DOM
结构中后面的覆盖前面的,所以.child2
就在上面。CSS3中出现了很多新属性,其中一些属性对层叠上下文也产生了很大的影响。如下:
flex|inline-flex
,子元素z-index
属性值不为auto
的时候,子元素为层叠上下文元素;opacity
属性值不是1
;transform
属性值不是none
;mix-blend-mode属性值不是
normal`;filter
属性值不是none
;isolation
属性值是isolate
;will-change
指定的属性值为上面任意一个;-webkit-overflow-scrolling
属性值设置为touch
标签:分享 基本 overflow image webkit width gre 它的 opacity
原文地址:https://www.cnblogs.com/mawn/p/9584503.html