css如何讓兩個(gè)div重疊

這篇文章給大家分享的是有關(guān)css如何讓兩個(gè)div重疊的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

css讓兩個(gè)div重疊的方法：首先利用【position:absolute】屬性對div設(shè)置絕對定位；然后利用z-index屬性來確定哪個(gè)div在上層。z-index屬性用于指定一個(gè)元素的堆疊順序。

重要屬性介紹：

position 屬性規(guī)定元素的定位類型。

屬性值：

• absolute    生成絕對定位的元素，相對于 static 定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。

• relative    生成相對定位的元素，相對于其正常位置進(jìn)行定位。因此，"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。

z-index 屬性指定一個(gè)元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。

屬性值：

• auto    默認(rèn)。堆疊順序與父元素相等。

• number    設(shè)置元素的堆疊順序。

• inherit    規(guī)定應(yīng)該從父元素繼承 z-index 屬性的值。

代碼實(shí)現(xiàn)：

html代碼：

<div id="img_head" >
<img src="img/首頁logo.png" class="head">
</div>
<div id="img_head_back">
<img src="img/背景.png" class="back" >
</div>

css代碼：

#img_head{
border: 1px solid #FF0000; 
position:absolute;
width:210px;
height: 210px;
z-index: 20;
left:600px;
top:170px;
text-align: center;
}
#img_head_back{
border: 0px solid #FF0000;
position:absolute;
width: 210px;
height: 210px;
left:600px;
top:170px;
z-index:10;
}

感謝各位的閱讀！關(guān)于css如何讓兩個(gè)div重疊就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！