image positions not working

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

  •  27-11-2021
  •  | 
  •  

题

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>
有帮助吗？

解决方案

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)

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top