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

【问题标题】：How to put a transparent image over a div without affecting the layout of the page?如何在不影响页面布局的情况下将透明图像放在 div 上？
【发布时间】：2011-02-22 05:32:12
【问题描述】：

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

【问题讨论】：

边距：0 自动；是“margin-left：auto;”的较短版本和 "margin-right: auto;"

标签： html css

【解决方案1】：

如果您将position: relative 应用于您要覆盖的div，则图像上的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 */
}

【讨论】：

【解决方案2】：

这是它的工作原理。该示例显示了一个绝对位于另一个图像之上的透明图像，从而创建了一个蒙版。

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

【讨论】：

【解决方案3】：

其他解决方案是这样使用：

.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;
}

:)

【讨论】：

【解决方案4】：

我会说 float 是一个很好的方法，它不阻塞其他东西，使用 absolute ，有些东西会隐藏在它下面或根据 z-index 显示在它上面。

This是一个很好的css定位教程，看看吧，你可能会找到你要找的东西

【讨论】：

【解决方案5】：

我认为position:absolute 更适合正常使用，因为它跟随滚动条。

【讨论】：

【解决方案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;*//
}

【讨论】：