image positions not working

StackOverflow https://stackoverflow.com/questions/13281519

  •  27-11-2021
  •  | 
  •  

Question

I can't seem to get boxclosed1.png to stay in the same spot if i re-size the browser. does anyone have any ideas? i'm testing in chrome. I tried to follow what was posted at this link: CSS: position absolute fails in resizing

EDIT: so i tried taking out all the other items (grass etc) and then it seems to be positioned correctly. in this case, what do i need to change about my current setup in divs and styles to make this work together?

Code:

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml11/DTD/xhtml11-strict.dtd">

<!-- START HTML -->
<html>

    <!-- START HEAD -->
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <link rel="stylesheet" type="text/css" href="css/27.css" />

    <!-- END HEAD -->
    </head>

    <!-- START BODY -->
    <body>

        <div id="cont">
 <a href="malmo/"><img class="animated bounceInDown" src="boxclosed1.png" alt="Malmö"></a>
        </div>

    <!-- END BODY -->
    </body>

<!-- END HTML -->
</html>
Was it helpful?

Solution

If you place boxclosed1.png with position: absolute inside a <div> relatively positioned, then the image will be still absolutely positioned in relation to its parent, which will move if the browser is resized ... so does the image.

Move the image out of any container (before the </body> closing tag) and give it a position: fixed AND set its position in relation to the bottom and right of the page like

.fixed { position: fixed; bottom: 20px; right: 20px; }

Check (and resize) fiddle

BTW, I wouldn't set width or height neither position to the html tag in order to avoid unexpected cross-browser results (unless you know exactly what you are doing)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top