首頁  >  文章  >  web前端  >  z-index屬性是什麼

z-index屬性是什麼

藏色散人
藏色散人原創
2021-04-19 11:51:5120419瀏覽

z-index屬性是css中用來設定元素的堆疊順序的一種屬性,擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面,並且元素可擁有負的z-index屬性值。

z-index屬性是什麼

本文操作環境:Windows7系統、Dell G3電腦、css3版。

z-index 屬性設定元素的堆疊順序。擁有較高堆疊順序的元素總是會處於堆疊順序較低的元素的前方。

註解:元素可擁有負的 z-index 屬性值。

註解:Z-index 僅能在定位元素上奏效(例如 position:absolute;)!

說明

此屬性設定一個定位元素沿 z 軸的位置,z 軸定義為垂直延伸到顯示區的軸。如果為正數,則離使用者更近,為負數則表示離使用者更遠。

預設值: auto

繼承性: no

版本: CSS2

JavaScript 語法:object.style.zIndex="1"

可能的值

auto 預設。堆疊順序與父元素相等。

number 設定元素的堆疊順序。

inherit 規定應該從父元素繼承 z-index 屬性的值。

【推薦學習:css影片教學

實例

設定圖片的z-index:

<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img  src="/i/eg_smile.gif" / alt="z-index屬性是什麼" >
<p>由于图像的 z-index 是 -1,因此它在文本的后面出现。</p>
</body>
</html>

效果:

z-index屬性是什麼

#

以上是z-index屬性是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn