How to put a transparent image over a div without affecting the layout of the page?

How do I put a transparent png image over a DIV without it affect anything else in the HTML document? I would do position absolute because it takes it out of the "normal fl开发者_运维百科ow of the document" but I have the whole website centered using "margin-left: auto;" and "margin-right: auto;"

if you apply position: relative to the div you want to cover then position: absolute on the image will be calculated relative to the covered div rather than the whole page, if it is a child element. i.e.

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

Other solution is to use after like this:

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

:)

I would say float is a good way to do this by not block other things , with absolute , some thing will hide under it or show above it base on the z-index.

This is a good tutorial on css positioning , take a look , you might found what you looking for

I think position:absolute is more appropriate for normal usages as it follows the scroll.

Here's how it works. The example shows a transparent image absolutely positioned over another image, creating a mask.

Check working example at http://jsfiddle.net/39VG9/1/

You be able to use this css in a class_name in React js (in html is class="class_name") to show a div as a pop up (bring up) or send back.

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



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

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