CSS中层叠上下文的使用方法

　　介绍

这篇文章给大家分享的是有关CSS中层叠上下文的使用方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

<强>前言

在有些CSS相互影响作用下,对元素设置的<代码> z - index>

<强>层叠上下文与层叠顺序

层叠上下文(叠加内容)是HTML中的三维概念,也就是元素z轴。层叠顺序(堆垛顺序)表示层叠时有着特定的垂直显示顺序。

<强>层叠准则

谁大谁上

当具有明显的层叠水平标示的时候,如识别的<代码> z-indx>

后来居上

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

<强>层叠上下文的特性

层叠上下文有以下特性:

<李>

层叠上下文的层叠水平要比普通元素高;

<李>

层叠上下文可以阻断元素的混合模式;

<李>

层叠上下文可以嵌套,内部层叠上下文及其所有子元素均受制于外部的层叠上下文;

<李>

每个层叠上下文和兄弟元素独立,也就是当进行层叠变化或渲染的时候,只需考虑后代元素;

<李>

每个层叠上下文是自成体系的,当元素发生层叠的时候,整个元素被认为是在父层叠上下文的叠层顺序中,

CSS中层叠上下文的使用方法

z - index值不是汽车的时候,会创建层叠上下文

对于包含<代码>位置:相对; <代码>位置:绝对的,的定位元素,以及FireFox/IE浏览器下包含<代码> 位置声明定位的元素,当其<代码> z - index> 汽车>

HTML代码

& lt; div ,类=皉ed-wrapper"比; 　　,,,& lt; div ,类=皉ed"在小红& lt;/div> 　　& lt;/div> 　　& lt; div ,类=癵ray-wrapper"比; 　　,,,& lt; div ,类=癵ray"在小灰& lt;/div> 　　& lt;/div>

CSS代码

.red-wrapper  { 　　,,,位置:,相对; 　　,,,z - index:,汽车; 　　} 　　 　　.red  { 　　,,,位置:,绝对; 　　,,,z - index:, 2; 　　,,,宽度:,300 px; 　　,,,身高:,200 px; 　　,,,text-align:,中心; 　　background - color,,,:,棕色; 　　} 　　 　　.gray-wrapper  { 　　,,,位置:,相对; 　　,,,z - index:,汽车; 　　},, 　　 　　.gray  { 　　,,,位置:,相对; 　　,,,z - index:, 1; 　　,,,宽度:,200 px; 　　,,,身高:,300 px; 　　,,,text-align:,中心; 　　background - color,,,:,灰色; 　　}

CSS中层叠上下文的使用方法

当两个兄弟元素<代码> z - index> 汽车> z - index: 1; 输给了小红的<代码> z - index: 2;>

然而当<代码> z - index> z - index> 汽车> 0 ,他们的子元素的之间的层叠关系就不不受本身<代码> z - index> 决定。

下面小红和小灰的父级的<代码> z - index> 0

.red-wrapper  { 　　,,,/*,其他样式,*/,,,z - index:, 0; 　　},, 　　 　　.gray-wrapper  { 　　,,,/*,其他样式,*/,,,z - index:, 0; 　　}

CSS中层叠上下文的使用方法

就会发现小灰在小红的上面了,因为小灰的父级和小红的父级都变成了层叠上下文元素,层叠级别一样,根据文档流中元素位置”后来居上”原则。

<强> CSS3对层叠上下文的影响

显示:flex | inline-flex与层叠上下文

父级是<代码>显示:flex> 显示:inline-flex;> z - index> 汽车>

CSS中层叠上下文的使用方法