图像与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重叠

回答

相关问题