CSS中z-index的属性

前言

想要在网页中做出层次效果，CSS中的z-index是必不可少的属性之一，今天学习的主要内容是对z-index属性的了解与实践应用。

一、认识z-index属性

z-index: auto/<integer>;   auto为默认值

1. z-index的定义
   z-index决定一个元素在文档中的层叠顺序，用于确认元素在当前层叠上下文中的层叠级别。

2. z-index的使用对象
   z-index适用于已定位元素（即定义了position为相对定位、绝对定位、固定定位的元素，浮动元素不能用）。

3. 元素层叠顺序
   每个元素层叠顺序由所属的层叠上下文和元素本身的层叠级别决定（每个元素仅属于一个层叠上下文）。

同一层叠上下文
层叠级别大的显示在上，级别小的显示在下（层叠级别中的两个元素，根据它们在html文档中的顺序，写在后面的将会覆盖写在前面的）。

不同层叠上下文
元素的显示顺序依据祖先的层叠级别来决定，与自身的层叠级别无关。
(即：父节点的z-index值很小，无论子节点的z-index值多大，其层级依旧小。)

二、深入z-index

1.z-index的取值范围

2.层叠顺序

层级由低到高：

• 标准流盒子< 浮动盒子< 定位盒子
• background / border < 负z-index < block块状水平盒子 < float浮动盒子 < inline / inline-block水平盒子 < z-index: 0; < 正z-index

注：定位了的元素永远能压住没有定位的元素

实践实例：

header.sticky ul li a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: scaleY(2);
    opacity: 0;
    transition: 0.5s;
    z-index: -1;
}   
header.sticky ul li a:hover::before{
    transform: scaleY(1.2);
    opacity: 1;
    
}
header.sticky ul li a::after{
    content: '';
    position: absolute;
    top: 1px;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    transform: scale(0);
    transition: 0.5s;
    z-index: -1;
    
}
header.sticky ul li a:hover::after{
    transform: scale(1);

效果：

总结

z-index看似简单，实则还需要深入理解和学习才能更好的运用的网页的制作中。