Question

如果我重新调整浏览器的大小，我似乎无法让boxclosed1.png保持在同一位置。有没有人有任何想法？我正在测试铬。我尝试按照此链接发布的内容：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>

Answer 1

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

将图片移出任何容器（在</body>结束标记之前）并为其指定position: fixed并根据bottom和right设置其位置像

这样的页面

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

检查（并调整大小） fiddle

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

图像位置不起作用

1 个答案: