z-index屬性的作用是什么?怎么用?


z-index屬性的作用是什么?z-index屬性設置元素的堆疊順序,當你想要控制某個元素的堆疊順序時,需要用到z-index屬性,寫法如下:

z-index:值;

這個值可以是正值,也可以是負值,如果是正數,則該定位元素離用戶更近,如果是負數,則該定位元素離用戶更遠。(默認的值是零:z-index:0; )

簡單理解就是:我們知道平面的軸是x和y,x控制水平的方向,y控制垂直的方向,那么z軸,就是立體的那條軸,控制上下的方向。

好比你把手機放在桌面上,手機是堆疊在桌面上的,如果你想讓手機在桌面下,那么,只要把手機的這個z-index:值;設置得比桌面的這個z-index:值;大,那么手機就會在桌面下。

回到元素的堆疊順序也是一樣的道理,擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。

z-index屬性怎么用?

首先要給這個元素添加position屬性,然后根據你想讓該元素出現的位置設置z-index:值;,舉例如下:

范如樂這里寫了兩個p元素和一個img元素,正常的位置如圖:

z-index屬性怎么用?

然后,我想改變這個img元素的堆疊順序,首先要給img元素添加一個position屬性,范如樂添加的是position:absolute

img
{
position:absolute;
left:0px;
top:0px;
}

這個時候,你會看到圖片堆疊在了文字的上面:

z-index屬性的作用是什么?

如果我想讓圖片堆疊在文字的下面,添加一個z-index:-1;屬性值即可:

z-index屬性是什么意思?

從上圖可以看到,圖片堆疊在了文字的下面。

如需了解更多定位屬性的用法,詳情點擊:《css的position屬性值有哪些?有何區別?》。

轉載時需注明來源!首發:如樂建站之家;原文鏈接:
http://www.lmaocr.com/css/8202.html
如樂建站之家創始人——范如樂:

如樂建站之家創始人范如樂  聯系Q Q:349142701
  聯系微信:349142701
  聯系電話:13189611692

【如樂建站之家】由范如樂于2013年創建至今,立志于解決新手不會快速自己建網站的痛苦,讓你也能零基礎快速學會自己建網站!詳細教程點擊下圖:




熱門文章: