如何在div上放置透明图像而不影响页面布局？

Question

如何在DIV上放置透明的png图像而不影响HTML文档中的任何其他内容？我会做绝对的位置,因为它从"文档的正常流程"中取出它,但我使用"margin-left:auto;"使整个网站居中 和"margin-right:auto;"

Answer 1

如果你申请position: relative到div你想覆盖,然后position: absolute在图像上相对覆盖将被计算格设置,而不是整个页面,如果它是一个子元素.即

<div id="tobecoverd">
    <p>your content...</p>
    <img src="./img/transparent.png" class="cover" />
</div>

div#tobecovered{
    position: relative;
}
div#tobecovered img.cover{
    position: absolute;
    /* position in top left of #tobecovered */
    top: 0; /* top of #tobecovered */
    left: 0; /* left of #tobecovered */
}

Answer 2

我想说 float 是一个很好的方法，通过不阻塞其他东西来做到这一点，使用绝对，有些东西会根据 z-index 隐藏在它下面或显示在它上面。

这是一篇关于css定位的很好的教程，看一下，你可能会找到你想要的东西