如何在不使用位置的情况下将一个 div 覆盖在另一个 div 上：绝对？答案

【问题标题】：How to overlay one div over another div without using position: absolute?如何在不使用位置的情况下将一个 div 覆盖在另一个 div 上：绝对？
【发布时间】：2012-10-13 18:14:27
【问题描述】：

我有两个带有两个图像的 div：

<div id="div1">    

     <div id="div2">
         <img src="img1" />
    </div> 

    <img src="img2" /> 

</div>

第二个比第一个小一些。如何在不使用的情况下将第二张图片放在第一张图片上

#div2{
    position: absolute;
}

我需要得到similar 结果但不使用绝对位置属性；

主要问题是在父 div 中还有很多其他元素，而不仅仅是 div2。

【问题讨论】：

不能在div上设置背景，然后在div里面放一张带背景的图片？
它不计算我将如何放置 div 的背景。我需要像在示例中那样定位它们，但不要对任何 div 使用 position: absolute。
@meep：这也是一个聪明的方法。
@DmytroTsiniavsky：绝对定位有什么问题？你不想使用它的主要原因是什么？我们也可以为您提供帮助。

标签： css overlay css-position margin

【解决方案1】：

负边距

您可以做很多负边距。我创建了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

【讨论】：

@DmytroTsiniavsky：我已经更新了我的示例，如果您需要将其放置在特定位置，则一张图像在底部重叠，另一张在顶部重叠。
Robert Koritnik 的 Negative Margins 答案非常出色，并且对复杂条件进行了排序我有一个水平菜单，最初的 li 使用 border-bottom:4px 来创建自定义客户端请求的效果。但是 onHover 它移动了背景底层元素。负边距-底部完美解决了这个问题！非常感谢。
这仅在包含的元素与其父元素大小相同或小于其父元素时才可行。否则它将拉伸其父级。
天啊。太感谢了。使用使用 HTML 设置打印信封邮资的邮寄程序。它无法正确处理绝对和相对定位，所以我将项目放在其他项目之上的唯一方法就是使用这个。

【解决方案2】：

这不是使用负边距的好方法。特别是在电子邮件模板时，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>

【讨论】：

对我不起作用。你能再分享一个例子吗？
分享你的html

【解决方案3】：

我问你的问题是为什么你必须不这样做

#div2 {
    position: absolute;
}

如果您遇到的问题是因为它是页面而不是 div 的绝对问题，请确保 #div1 具有以下内容：

#div1 {
    position:relative;
}

【讨论】：

不，这不是问题，但是，请 +1 回复。

【解决方案4】：

您可以将div2 嵌套在div1 中：

<div id="div1">
    <img src="\img1.png" />

    <div id="div2">
        <img src="\img1.png" />
    </div>

</div>

【讨论】：

对不起，我第一次提出的问题没有完全正确。 div 已经嵌套。我已经编辑了问题。