css z-index屬性怎麼用
- 青灯夜游原創
- 2019-05-27 14:23:464272瀏覽
css z-index 屬性用於設定元素的堆疊順序；擁有較高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。此屬性只能在定位元素上發揮作用（例如：position:absolute, position:relative, or position:fixed）。
css z-index屬性怎麼用？
z-index 屬性設定元素的堆疊順序。擁有較高堆疊順序的元素總是會處於堆疊順序較低的元素的前方。
語法：
z-index : auto | number;
參數：
auto：預設。堆疊順序與父元素相等。
number：數值，設定元素的堆疊順序；可以是正值，也可以是負值。
說明：此屬性設定一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。如果為正數，則離使用者更近，為負數則表示離使用者更遠。
註解：所有主流瀏覽器都支援 z-index 屬性。任何的版本的 Internet Explorer （包括 IE8）都不支援屬性值 "inherit"。元素可擁有負的 z-index 屬性值。 Z-index 只能在定位元素上發揮作用（例如：position:absolute, position:relative, or position:fixed）！
css z-index屬性 範例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
h2,p{
background-color: white;
border: 1px solid red;
}
</style>
</head>
<body>
<h2>This is a heading</h2>
<img src="https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg" / alt="css z-index屬性怎麼用" >
<p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p>
</body>
</html>效果圖：
以上是css z-index屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn