css中z-index有哪些意思?
在css中,z-index的意思为“层级,层空间层叠品级”,可以指定一个元素的堆叠次序,具有更高堆叠次序的元素总是会处于堆叠次序较低的元素的前面。
css z-index
z-index :auto|
auto 默许值
定义:一个元素在文档中的层叠次序,用于确认元素在目前层叠高低文中的层叠级别。
适用于:定位元素。即定义了position为非static的元素
每个元素层叠次序由所属的层叠高低文和元素自身的层叠级别决议(每个元素仅属于一个层叠高低文)。
1、统一层叠高低文
层叠级别大的显示在上面,级别小的显示鄙人面;
层叠级别中的两个元素,根据它们在HTML文档流中的次序,写在背面的将会遮盖前面的。
2、不一样层叠高低文
元素的显示次序根据先人的层叠级别来决议,与本身的层叠级别无关。
例:
1、有两个p盒子,a、c在一个盒子里,b在另一个盒子里,来考虑其z-index是不是正常结果。
a
c
b
p未设定z-index,在高级阅读器下不会发生新的部分层叠高低文,也就是说它们的子元素没有被新的部分层叠高低文包裹,那么它们的子元素就处在统一个层叠高低文中,可以直接通过本身的层叠级别来决议显示次序。
div { position: relative; width: 100px; height: 100px; } p { position: absolute; font-size: 20px; width: 100px; height: 100px; } .a { background-color: pink; z-index: 1; } .c { background-color: green; z-index: 2; top: 20px; left: 20px; } .b { background-color: red; z-index: 3; top: -20px; left: 40px; }
a、b、c处于一个层叠高低文中,所以依据z-index大小来肯定层级。如下图所示:
2、有两个p盒子,a、c在一个盒子里,b在另一个盒子里,来考虑其z-index是不是正常结果。
a
c
b
p设定z-index,那么p中的子元素以父元素的层叠关系为主。
a、b、c处于不一样的层叠高低文中,所以依据父级的z-index大小来肯定层级。如下图所示:
由上,可以看出z-index的决议方式:所属的层叠高低文和元素自身的层叠级别
更多编程相干见识,请拜访:编程学习网站!!
以上就是css中z-index有哪些意思?的细致内容,更多请关注 百分百源码网 其它相干文章!