圖像與div重疊

iam面臨一個重疊的小問題。圖像與div重疊

考慮這個HTML片段

<html> 
    <head> 
    div 
    { 
     width:100%; 
     height:100px; 
    } 
    img 
    { 
     width:100%; 
    } 
    #div2 
    { 
     margin-top:-100px; 
    } 
    </head> 
    <body> 
    <div id="div1"> 
     <img src=""/> 
    </div> 
    <div id="div2"> 
     some text 
    </div> 
    </body> 
</html>

我想在重疊DIV1一個DIV2。由於div2的margin-top等於div1的高度，因此代碼會重疊。我的問題是圖像重疊div2。這種行爲的原因是什麼？

而且我不想給元素絕對的位置，因爲如果使用絕對位置，這段代碼將會破壞頁面的佈局。

謝謝。

來源

2014-10-09 PRASANTH

'z-index'是您需要查看的屬性/術語。 – 2014-10-09 14:38:58

好吧，我試着給Z1索引10爲div1和20爲div2仍然無法正常工作。 – PRASANTH 2014-10-09 14:40:35

z-index只適用於定位元素 – 2014-10-09 14:42:45

Check this jsfiddle。正如一句提到的，需要定位元素。

div 
{ 
    width:100%; 
    height:100px; 
} 
img 
{ 
    width:100%; 
} 
#div1 { 
z-index: 10; 
position: relative; 
} 

#div2 
{ 
position: relative; 
margin-top:-100px; 
border: 1px solid #f00; 
z-index: 20; 
color: #fff; 
font-weight: bold; 
}

來源

2014-10-09 14:44:49 vaso123

感謝man..It對我而言很愚蠢，它解決了我的問題。我想我錯過了div的風格位置。 – PRASANTH 2014-10-09 14:52:23

圖像與div重疊

回答

相關問題