CSS - 层叠样式表

CSS 层叠上下文是一个用于控制网页中不同 DOM 元素堆叠顺序的概念。**z-index** 属性决定了元素在一个堆叠上下文中的堆叠顺序。

z-index 值较高的元素会叠加在 z-index 值较低的元素之上；如果元素具有相同的 z-index 值，则它们的堆叠顺序取决于它们在 DOM 中的顺序。在本教程中，我们将更详细地介绍 CSS 层叠以及示例。

使用 z-index 属性进行 CSS 层叠

如上所述，可以使用z-index 属性来决定网页中元素的堆叠顺序。下面的示例演示了如何使用 z-index 属性创建垂直堆叠的元素。z-index 值较高的元素会位于 z-index 值较低的元素之上。

示例

<html>

<head>
    <style>
        div{
            position: absolute;
            height: 100px;
            width: 100px;
            padding: 5px;
            color: white;
        }
        .box1 {
            background-color: darkred;
            z-index: 1;
            left: 10px;
            top: 10px;
        }
        .box2 {
            background-color: darkblue;
            z-index: 2;
            margin: 10px;
            left: 50px; 
            top: 30px;
        }
        .box3 {
            background-color: darkgreen;
            z-index: 3;
            margin: 20px;
            left: 80px; 
            top: 50px;
        }
    </style>
</head>

<body>
    <div class="box1">
        z-index: 1
    </div>
    <div class="box2">
        z-index: 2
    </div>
    <div class="box3">
        z-index: 3
    </div>
</body>

</html>

将文本层叠在图像之上

在 CSS 中，可以使用position 属性将文本定位在图像的不同位置之上。

首先，我们需要将图像容器的 position 属性设置为`position: relative`，并将文本的 position 属性设置为`position: absolute`。现在，您可以使用 CSS 的inset 属性（如 top、bottom、left 和 right）来定位文本元素。

示例

<html>
<head>
    <style>
        .container {
            position: relative;
            border: 2px solid #ef2c2c;
        }
        .center {
            position: absolute;
            top: 45%;
            width: 100%;
            text-align: center;
        }
        .top-left {
            position: absolute;
            top: 12px;
            left: 30px;
        }
        .top-right {
            position: absolute;
            top: 12px;
            right: 30px;
        }
        .bottom-left {
            position: absolute;
            bottom: 12px;
            left: 30px;
        }
        .bottom-right {
            position: absolute;
            bottom: 12px;
            right: 30px;
        }
        img {
            width: 100%;
            opacity: 0.7;
        }
    </style>
</head>
<body>
   <div class="container">
        <img src="/css/images/red-flower.jpg" 
                width="1000px" height="350px">

        <h3 class="center">
            Text at Center
        </h3>
        <h3 class="top-left">
            Text at Top Left
        </h3>
        <h3 class="top-right">
            Text at Top Right
        </h3>
        <h3 class="bottom-left">
            Text at Bottom Left</h3>
        <h3 class="bottom-right">
            Text at Bottom Right
        </h3>
   </div>
</body>
</html>

不使用 z-index 属性进行定位

下面的示例演示了如何在不使用z-index 属性的情况下创建层。

示例

<html>

<head>
    <style>
        div{
            position: absolute;
            height: 100px;
            width: 100px;
            padding: 5px;
            color: white;
        }
        .box1 {
            background-color: darkred;
            padding: 10px;
            left: 10px;
            top: 10px;
        }
        .box2 {
            background-color: lightblue;
            padding: 10px;
            margin: 10px;
            left: 30px; 
            top: 30px;
        }
        .box3 {
            background-color: yellow;
            padding: 5px;
            margin: 10px;
            left: 60px; 
            top: 60px;
        }
    </style>
</head>

<body>
    <div class="box1">
        Box 1
    </div>
    <div class="box2">
        Box 2
    </div>
    <div class="box3">
        Box 3
    </div>
</body>

</html>

打印页面

CSS - 层叠样式表

目录

使用 z-index 属性进行 CSS 层叠

示例

将文本层叠在图像之上

示例

不使用 z-index 属性进行定位

示例