↩ zhcn 编程语言 Web相关 JSON 非公開: CSS z-index：堆叠元素

CSS z-index：堆叠元素

通常，您可能会将 HTML 网页视为二维平面。这是因为页面内的文本、图像或其他元素按照特定的顺序放置在页面上，每个元素之间有一定的间隙，没有任何重叠。然而，真实的网页实际上是三维的，元素可能会堆叠（重叠），您可以通过 CSS z-index 属性来控制元素的堆叠顺序，如下图所示。

[标题id =“attachment_681”对齐=“aligncenter”宽度=“421”]

图：元素堆叠演示（来源：youtube.com）[/caption]

每个元素都有一个默认的 z-index 属性，可以将其与位置属性结合起来创建类似于 PhotoShop 的分层效果。 z-index 属性允许您设置元素的堆叠级别（如果元素重叠，无论该元素是在另一个元素之上还是之下），具有较高堆叠级别的元素将具有较高的堆叠级别。在下部元素之前（或之上）。）。

下表显示了 z – index 属性的可选值。

价值	解释
auto	默认值，堆叠顺序与父元素相同
number	使用特定值（整数）设置元素的堆叠顺序。
inherit	从父元素继承 z-index 属性的值

元素的层次关系需要注意以下几点：

对于未设置位置属性的元素，或者如果位置属性的值为静态，则后面定义的元素将覆盖前面的元素。
对于具有位置属性集和非静态属性值的元素，这些元素覆盖不具有位置属性集或具有静态位置属性值的元素。
对于定义了非静态position属性值和z-index属性的元素，z-index属性值较高的元素会覆盖z-index属性值较低的元素。换句话说，z-index属性值越高，如果z-index属性值相同，后面定义的元素就会覆盖前面定义的元素。
仅当元素定义位置属性且属性值不是静态时，z-index 属性才有效。

[示例] 下面是显示 z-index 属性使用的具体代码。

 <!DOCTYPE html>
<html>
<head>
    <style>
        .box-x {
            width: 150px;
            height: 350px;
            border: 1px dashed red;
            background-color: rgba(255, 153, 153, 0.7);
            float: left;
        }
        .box-y {
            width: 300px;
            height: 120px;
            border: 1px dashed green;
            background-color: rgba(179, 255, 153, 0.7);
        }
        .one {
            position: absolute;
            top: 5px;
            left: 5px;
            z-index: 4;
        }
        .two {
            position: relative;
            top: 30px;
            left: 80px;
            z-index: 3;
        }
        .three {
            position: relative;
            top: -10px;
            left: 120px;
            z-index: 2;
        }
        .four {
            position: absolute;
            top: 5px;
            right: 5px;
            z-index: 1;
        }
        .five {
            margin-left: 100px;
            margin-top: -50px;
            background-color: rgba(255, 255, 153, 0.7);
            z-index: 5;
        }
    </style>
</head>
<body>
    <div class="box-x one">一</div>
    <div class="box-y two">二</div>
    <div class="box-y three">三</div>
    <div class="box-x four">四</div>
    <div class="box-y five">五</div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_683”对齐=“aligncenter”宽度=“1024”] 图：z-index属性演示

图：z-index 属性演示[/caption]

通俗易懂的讲解《CSS z-index：堆叠元素》！您必须观看的最佳 2 个视频

CSSレイアウトのPOSITION(ポジション)を分かりやすく解説！relative,absolute,fixedついでにz indexも解説！

https://www.youtube.com/watch?v=bUdjz63gT8E&pp=ygUoQ1NTIHotaW5kZXg6IOimgee0oOOBruepjeOBv-mHjeOBrSZobD1KQQ%3D%3D

JSON