如何在不影响页面布局的情况下将透明图像放在一个div上方？

Question

如何将一个透明的png图片放置在一个DIV上，而不影响HTML文档中的其他内容？我会使用绝对定位(position absolute)，因为它可以使其脱离“正常文档流”，但是我整个网站都使用了“margin-left: auto;”和“margin-right: auto;”来居中。

- funk-shun

---

"margin: 0 auto;" 是 "margin-left: auto;" 和 "margin-right: auto;" 的缩写版本。 - wizztjh

Answer 1

如果你给想要覆盖的div应用position: relative，那么在图片上应用position: absolute时，计算相对于被覆盖的div而不是整个页面，如果它是一个子元素。例如：

<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 */
}

- Chris

Answer 2

另一种解决方案是像这样使用 after：

.image:after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url(https://i.imgur.com/DDdKwlk.png) no-repeat 0 0;
    background-size: cover;
}

:)

- ismaestro

Answer 3

我认为使用浮动是一个不会阻塞其他元素的好方法，而使用绝对定位，某些元素将会被隐藏在其下方或显示在其上方，这取决于它们的z-index。

这篇CSS定位的教程很不错，你可以看一下，也许能找到你需要的东西。

- wizztjh

Answer 4

我认为position:absolute更适合普通用途，因为它会随着滚动而移动。

- Harold Chan

Answer 5

这是它的工作原理。示例显示了一个绝对定位在另一张图像上方的透明图像，创建了一个遮罩。

在http://jsfiddle.net/39VG9/1/中检查工作示例

- Hussein

---

不仅你的回答是错误的，而且你甚至没有解释你做了什么，并且所有内容都在jsfiddle中。 - Mdev

Answer 6

您可以在React js中的class_name中使用此CSS（在HTML中为class="class_name"），以显示一个div作为弹出窗口（弹出）或发送回。

<div classname="class_name">
...
</div>



.class_name{
position: absolute;
/**Put div hide*/
/**z-index: -9;*//

/**Put as pop up*/
/**z-index: 9;*//
}

- Fernando Sanchez Villanueva