在css的定位中等太,我們會(huì)用到z-index這個(gè)屬性.
z-index值表示誰(shuí)壓著誰(shuí)右核。數(shù)值大的壓蓋住數(shù)值小的半哟。
●z-index值沒(méi)有單位,就是一個(gè)正整數(shù)镜廉。默認(rèn)的z-index值是0弄诲。
●只有定位了的元素,才能有z-index值娇唯。也就是說(shuō)齐遵,不管相對(duì)定位、絕對(duì)定位塔插、固定定位梗摇,都可以使用z-index值。而浮動(dòng)的東西不能用想许。
●如果大家都有z-index值伶授,z-index大的元素壓住z-index值小的元素。
● 如果大家都沒(méi)有z-index值流纹,或者z-index值一樣糜烹,寫(xiě)在HTML后面可以壓住前面的元素。定位了的元素漱凝,永遠(yuǎn)能夠壓住沒(méi)有定位的元素疮蹦。
● 從父現(xiàn)象:父親被別人壓住了,兒子也要被別人的子元素壓住茸炒。
先來(lái)看第一個(gè)例子愕乎,只有定位的元素才能使用z-index
運(yùn)行結(jié)果:
box2的z-index大于box1的z-index,所以box2壓住box1壁公。這里我們對(duì)box2和box1都設(shè)置了定位感论,如果不設(shè)置定位,而是設(shè)置浮動(dòng)贮尖,z-index是不起任何作用的笛粘。
Css代碼修改如下:
.box1{
float: left;
width: 100px;
height: 100px;
background-color: red;
top: 100px;
left: 100px;
z-index:2;
}
.box2{
float: left;
width: 100px;
height: 100px;
background-color: green;
top: 180px;
left: 180px;
z-index:4;
}
運(yùn)行結(jié)果:
可以看出只是設(shè)置浮動(dòng),z-index是不起作用的湿硝。