新聞中心
div cssz-index層重疊順序

創(chuàng)新互聯(lián)網(wǎng)站建設(shè)服務(wù)商,為中小企業(yè)提供成都網(wǎng)站設(shè)計、成都網(wǎng)站制作服務(wù),網(wǎng)站設(shè)計,網(wǎng)站改版維護(hù)等一站式綜合服務(wù)型公司,專業(yè)打造企業(yè)形象網(wǎng)站,讓您在眾多競爭對手中脫穎而出創(chuàng)新互聯(lián)。
div層、span層等html標(biāo)簽層重疊順序樣式z-index,平時CSS使用較少,但也會難免會碰到CSS z-index使用。
從基礎(chǔ)語法到應(yīng)用案例教程講解學(xué)習(xí)z-index。
一、z-index語法與結(jié)構(gòu)
- div{
- z-index:100
- }
注意:z-index的數(shù)值不跟單位。
z-index的數(shù)字越高越靠前,并且值必須為整數(shù)和正數(shù)(正數(shù)的整數(shù))。
二、z-index使用條件
z-index在使用絕對定位 position:absolute屬性條件下使用才能使用。通常CSS讓不同的對象盒子以不同順序重疊排列,CSS就是要z-index樣式屬性。
三、案例
1. z-index重疊順序案例
為了方便觀察,設(shè)置3個DIV盒子,分別設(shè)置不同css背景顏色,設(shè)置相同CSS高度、CSS寬度。分別設(shè)置背景顏色)為黑色、紅色、藍(lán)色。CSS width為300px,css height為100px。
css代碼(沒加z-index屬性)
CSS代碼(加上z-index屬性后) :
html代碼
沒加的效果:
加上z-index屬性效果:
2. 案例說明
三個盒子均都使用了絕對定位屬性position樣式,并且設(shè)置相同的高度和寬度樣式。為了便于觀察CSS使用left、right屬性并賦予不同值,讓其錯落有致。
- Div css5-1 盒子背景為黑色, z-index:10
- Div css5-2 盒子背景為紅色, z-index:20
- Divcss5-3盒子背景為藍(lán)色 , z-index:15
為可以看見第一個盒子z-index:10,所以重疊在最下層,而第二個盒子z-index:20,值最大所以最上層重疊,第三個盒子設(shè)置z-index:15,居中。
四、總結(jié)
本文基于CSS基礎(chǔ),介紹了如何使用z-index重疊順序樣式,在實(shí)際DIV+CSS布局時候CSS需要絕對定位樣式,并且可以使用left、right進(jìn)行定位,通過不同z-index值實(shí)現(xiàn)層重疊順序排列。代碼很簡單,希望能夠幫助你學(xué)習(xí)。
本文轉(zhuǎn)載自微信公眾號「 IT共享之家」,可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系 IT共享之家公眾號。
文章標(biāo)題:一篇文章帶你了解Css z-index(重疊順序)
文章地址:http://www.dlmjj.cn/article/dhgdpsp.html


咨詢
建站咨詢
