图像位置不起作用答案

【问题标题】：image positions not working图像位置不起作用
【发布时间】：2012-11-08 02:21:20
【问题描述】：

如果我重新调整浏览器的大小，我似乎无法让 boxclosed1.png 留在同一个位置。有人有什么想法吗？我正在用 chrome 进行测试。我尝试关注此链接上发布的内容：CSS: position absolute fails in resizing

编辑：所以我尝试取出所有其他物品（草等），然后它似乎定位正确。在这种情况下，我需要更改我当前在 div 和样式中的设置以使其协同工作？

代码：

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>

【问题讨论】：

如果您可以提供一个 jsfiddle 或类似的东西（有很多这样的网站），通常在这些情况下会有所帮助，那么您能否提供两个单独的小提琴，哪些有效，哪些无效？

标签： html css animate.css

【解决方案1】：

如果您将 boxclosed1.png 和 position: absolute 放在相对定位的 <div> 中，则图像仍将相对于其父级绝对定位，如果调整浏览器大小，该图像将移动...图像也是如此。

将图像移出任何容器（在 </body> 结束标记之前）并给它一个 position: fixed 并设置其相对于页面的 bottom 和 right 的位置

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

检查（并调整大小）fiddle

顺便说一句，我不会将width 或height 都设置为html 标记以避免意外的跨浏览器结果（除非您确切知道自己在做什么）

【讨论】：