笙亿网络策划

CSS Layers 怎么用？如何在 CSS 中创建和管理层叠效果？

约 7 分钟读完 3 阅
文章导读
Previous Quiz Next CSS 图层是一个用于控制网页中不同 DOM 元素堆叠顺序的概念。z-index 属性决定了堆叠上下文中元素的堆叠顺序。
📋 目录
  1. 一 目录
  2. 二 使用 z-index 属性进行 CSS 图层
  3. 三 在图像上方层叠文本
  4. 四 不使用 z-index 属性进行定位
A A

CSS - 图层

Previous
Quiz
Next

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

具有更高 z-index 的元素会层叠在具有更低 z-index 的元素之上，如果元素具有相同的 z-index，则它们按照在 DOM 中的顺序堆叠。本教程将详细介绍 CSS 图层的细节和示例。

目录

  • 使用 z-index 属性进行 CSS 图层
  • 在图像上方层叠文本
  • 不使用 z-index 属性的定位

使用 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>