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 屬性進行定位

示例