我有两个带有两个图像的div:
<div id="div1">
<div id="div2">
<img src="img1" />
</div>
<img src="img2" />
</div>
第二个比第一个小一些。如何在不使用
的情况下将第二张图像放在第一张图像上#div2{
position: absolute;
}
我需要获得similar结果,但不使用位置绝对属性;
主要问题是在父div中还有很多其他元素,而不仅仅是div2。
答案 0 :(得分:18)
您可以使用负边距做很多事情。我创建了an example只有两张没有任何div的图像。
img {
display: block;
}
.small {
margin: -202px 0 0 0;
border: 1px solid #fff;
}
.small.top {
position: relative;
margin: 0 0 -202px 0;
}
<img src="http://www.lorempixel.com/300/300">
<img class="small" src="http://www.lorempixel.com/200/200">
And some text
<img class="small top" src="http://www.lorempixel.com/200/200">
<img src="http://www.lorempixel.com/300/300">
And some more text
答案 1 :(得分:7)
我的问题是你为什么要这样做而没有
#div2 {
position: absolute;
}
如果您遇到的问题是因为它对页面而言是绝对的而不是div,那么请确保#div1具有以下内容:
#div1 {
position:relative;
}
答案 2 :(得分:2)
您可以在div2
内嵌套div1
:
<div id="div1">
<img src="\img1.png" />
<div id="div2">
<img src="\img1.png" />
</div>
</div>
答案 3 :(得分:1)
使用负边距不是一个好方法。特别是当电子邮件模板时,gmail拒绝负边距和头寸。另一种方式是
<div class='wrapDiv' style='width: 255px;'>
<div class='divToComeUp' style='
float: left;
margin-top: 149px; width:100%;'>This text comes above the .innerDiv
according to the amount of margin-top that you give</div>
<div class='innerDiv' style='width:100%; height:600px'>
Inner div Content
</div>
</div>