z-index

Posted on Edited on In Views: Disqus:

 

借用w3cSchool的範例來說明 z-index

<!DOCTYPE html>
<html>
<head>
    <style>
        img {
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 1;
        }
    </style>
</head>
<body>

    <h1>This is a heading</h1>

    <img src="https://www.w3schools.com/cssref/w3css.gif" width="100" height="140">

    <p>Because the image has a z-index of -1, it will be placed behind the text.</p>

</body>
</html>

說明：

1、z-index 的值可以是 0、正值、負值，數值越大表示該元素相對於其他元素的越上層。

2、使用 z-index 屬性需要另外指定 position 屬性值才有效，除了「position : static」無效之外。

 

參考資料：

Why does z-index not work?