z-index屬性指的是什么

發(fā)布時(shí)間：2021-04-19 13:51:48 來(lái)源：億速云閱讀：254 作者：小新欄目：web開發(fā)

這篇文章主要介紹z-index屬性指的是什么，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

z-index屬性是css中用于設(shè)置元素的堆疊順序的一種屬性，擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面，并且元素可擁有負(fù)的z-index屬性值。

本文操作環(huán)境：Windows7系統(tǒng)、Dell G3電腦、css3版。

z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。

注釋：元素可擁有負(fù)的 z-index 屬性值。

注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！

說(shuō)明

該屬性設(shè)置一個(gè)定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)，則離用戶更近，為負(fù)數(shù)則表示離用戶更遠(yuǎn)。

默認(rèn)值： auto

繼承性： no

版本： CSS2

JavaScript 語(yǔ)法： object.style.zIndex="1"

可能的值

auto 默認(rèn)。堆疊順序與父元素相等。

number 設(shè)置元素的堆疊順序。

inherit 規(guī)定應(yīng)該從父元素繼承 z-index 屬性的值。

實(shí)例

設(shè)置圖像的 z-index：

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

<body>
<h2>This is a heading</h2>
<img src="/i/eg_smile.gif" />
<p>由于圖像的 z-index 是 -1，因此它在文本的后面出現(xiàn)。</p>
</body>
</html>

效果：

z-index屬性指的是什么

以上是“z-index屬性指的是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

z-index屬性指的是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽