css - 如何将一张图像浮动在另一张图像之上？

Question

我已经对此主题进行了一些搜索，但似乎找不到正是我正在寻找的答案。
我正在尝试在我的网站上设置横幅广告 (728 x 90)，因此它“覆盖”了带有背景图像的 div。因此，如果有人有广告拦截器，他们会在广告应该出现的位置看到一张图片，上面写着“请禁用你的广告拦截”。

我目前的代码是这样的：

<div style="float: left; background-image: url(../forum/banners/replacement.png); height: 90px; width: 728px; border: 1px solid black;">
</div>
<!-- BEGIN SMOWTION TAG - 728x90 - DO NOT MODIFY -->
    <script type="text/javascript">
    <!-- ad code goes here -->
    </script>
<!-- END SMOWTION TAG - 728x90 - DO NOT MODIFY -->

但是，这会使广告显示在 div 下，而不是“叠加”在其上。我怎样才能使广告和 div 不剪辑？

Answer 1

定位父母relative，然后是孩子absolute....

#Container {
    position: relative;
}

.Children {
    position: absolute;
    top: 0px
    left: 0px
}

绝对值与父级“相对” - 因此子级将在父级之间为 0px，向下为 0px - 即重叠

<div id="Container">
    <img class="Children" src="..."/>
    <img class="Children" src="..."/>
</div>