您好,登錄后才能下訂單哦!
本篇文章為大家展示了怎么在CSS中使用z-index屬性,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。
默認的擺放規(guī)則
假定元素沒有指定z-index屬性,那么元素按照如下順序疊放(從底到頂)
根元素的背景和邊界
普通流(無定位)里的塊元素(沒有position或者position:static;)按HTML中的出現(xiàn)順序堆疊
定位元素按HTML中的出現(xiàn)順序堆疊
浮動
對于浮動的塊元素來說,堆疊順序變得有些不同。浮動塊元素被放置于非定位塊元素與定位塊元素之間:
根元素的背景與邊框
位于普通流中的后代塊元素按照它們在 HTML 中出現(xiàn)的順序堆疊
浮動塊元素
常規(guī)流中的后代行內(nèi)元素
后代中的定位元素按照它們在 HTML 中出現(xiàn)的順序堆疊
使用 z-index
如果需要改變默認的擺放順序,只需給元素指定z-index。z-index必須是整數(shù),體現(xiàn)了元素在z軸的位置:
底層:距離觀察者最遠
……
-3 層
-2 層
-1 層
0 層 (默認)
1 層
2 層
3 層
……
頂層:最接近觀察者
沒有指定z-index的時候,所有元素默認在0層渲染。多個元素的z-index屬性相同時,將按照上文描述的順序布局。
使用z-index排序的例子:
注意,div#5的z-index無效,因為未指定position屬性。
堆疊上下文
指定z-index屬性將構(gòu)造一個堆疊上下文。
以下元素構(gòu)成堆疊上下文指:
根元素html
定位元素,且其z-index值不為auto
opacity小于1的元素
在移動WebKit、Chrome22+以上,指定position: fixed的元素總是會構(gòu)造堆疊上下文,即使z-index為auto。
堆疊上下文中的子元素按照前述順序擺放。堆疊上下文內(nèi)部的子堆疊上下文的z-index只在父堆疊上下文中有意義。
總而言之:
z-index不為auto,opacity小于1的元素會構(gòu)建堆疊上下文。
堆疊上下文可以嵌入其他堆疊上下文。
每個堆疊上下文和它的同級上下文是獨立的。
每個堆疊上下文是自包含的。
上述內(nèi)容就是怎么在CSS中使用z-index屬性,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。