CSS z-index 属性
生活随笔
收集整理的這篇文章主要介紹了
CSS z-index 属性
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
定義和用法
z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
注釋:元素可擁有負(fù)的 z-index 屬性值。
注釋:Z-index 僅能在定位元素上奏效(例如 position:absolute;)!
說(shuō)明
該屬性設(shè)置一個(gè)定位元素沿 z 軸的位置,z 軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù),則離用戶更近,為負(fù)數(shù)則表示離用戶更遠(yuǎn)。
用法:Z-index 可用于將在一個(gè)元素放置于另一元素之后
<html> <head> <style type="text/css"> img.x { position:absolute; left:0px; top:0px; z-index:-1 } </style> </head><body> <h1>這是一個(gè)標(biāo)題</h1> <img class="x" src="../i/eg_mouse.jpg" tppabs="http://www.w3school.com.cn/i/eg_mouse.jpg" /> <p>默認(rèn)的 z-index 是 0。Z-index -1 擁有更低的優(yōu)先級(jí)。</p> </body></html>
<span style="font-size:18px;"><html> <head> <style type="text/css"> img.x { position:absolute; left:0px; top:0px; z-index:1 } </style> </head><body> <h1>這是一個(gè)標(biāo)題</h1> <img class="x" src="../i/eg_mouse.jpg" tppabs="http://www.w3school.com.cn/i/eg_mouse.jpg" /> <p>默認(rèn)的 z-index 是 0。Z-index 1 擁有更高的優(yōu)先級(jí)。</p> </body></html></span>
與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證,附贈(zèng)技術(shù)全景圖
總結(jié)
以上是生活随笔為你收集整理的CSS z-index 属性的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 这两天有点热吆,star直线上涨!~Je
- 下一篇: 二本毕业生逆袭成大厂架构师的成长心得