All geek questions in one place

Make two transparent images using CSS

I am trying to make two transparent images (having the same size / size) superimposed on a div in the upper left corners. I tried:

 <html xmlns="http://www.w3.org/1999/xhtml"> <body> <div style="margin:20px;"> <div id="main" style="overflow:hidden;background-color:red;width:400px;height:400px;border:3px solid blue;"> <img src="myimage1.png" style="position:relative;top:0px;left:0px;z-index:0;"/> <img src="myimage2.png" style="position:relative;top:0px;left:0px;z-index:10;"/> </div> </div> </body> </html>

But that does not work. Instead, the two pictures are merged inside the parent div .

+4
source share
3 answers

Try making #main have position:relative , then change the two <img> to use position:absolute .

+6
source

make the second image position:absolute and #main position:relative

+1
source

Just a note:

position:relative and position:absolute refer to 0;0 closest parent that has position:relative or position:absolute . If none of your div has one, then it refers to 0;0 (top left) of the document ( body ).

position:relative - the upper and left parts mean the difference between the natural value of the element flow - i.e. if the "image" has a natural flux of x 1500 and y 1200, top: 150px; left: -50px; top: 150px; left: -50px; move it to x: 1450; y: 1350; x: 1450; y: 1350;

position:absolute - the top and left are aligned with respect to 0;0 nearest p:r or p:a parent element, regardless of the natural flow - ex. (in pseudo html / css):

 <div style="relative/absolute"> <img absolute="top:-20px; left: 150px;"> </div>

The image will be 20px above and 150 pixels to the right of the upper left corner of the parent div.

However, you want your container to be both relative and absolute, and both your stacked images should be position:relative with top: 0; left: 0; top: 0; left: 0; . Remember to set z-index if you want better control over layering.

-A

0
source

Source: https://habr.com/ru/post/1305970/

More articles:


All Articles