gpt4 book ai didi

html - 图像位置不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 15:31:50 25 4
gpt4 key购买 nike

如果我重新调整浏览器的大小,我似乎无法让 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>

最佳答案

如果你放置 boxclosed1.pngposition: absolute<div> 里面相对定位,则图像将仍然相对于其父级绝对定位,如果浏览器调整大小,父级将移动...图像也是如此。

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

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

检查(并调整大小) fiddle

顺便说一句,我不会设置 widthheight html 的两个位置都没有标记以避免意外的跨浏览器结果(除非你确切地知道你在做什么)

关于html - 图像位置不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13281519/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com