Question

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

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

Answer 2

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

检查http://jsfiddle.net/39VG9/1/

处的工作示例

Answer 3

我认为浮动是一种很好的方法，可以通过不阻挡其他东西来做到这一点，绝对的，有些东西会隐藏在它之下或者在z-index的基础上显示在它之上。

This是关于css定位的好教程，看看，你可能找到了你想要的东西

Answer 4

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

Answer 5

其他解决方案是在这之后使用：

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

：）

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

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

6 个答案:

检查http://jsfiddle.net/39VG9/1/