html - 当我调整浏览器大小时，DIV 一直在移动

Question

所以我正在编写一个布局，我正在使用一个 DIV 将我的 iframe 保持在布局的范围内。问题是每当我调整浏览器大小时，我的 DIV 都会不断移动。我四处寻找答案，但似乎没有一个能解决我遇到的问题。

这里是网站：

http://www.buymycookies.org/index.html

这是我的代码：

<div style="position:absolute; top:280; left:560"> 
<iframe src="main.html" name="main" width="240" height="240" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" scrolling=auto allowtransparency=true>
</iframe>
</div>

作为旁注，我希望能够控制我的 DIV 的去向，因为它需要保持在布局的框内。

谢谢你的帮忙！

Answer 1

您正在使用绝对定位，因此您的<div>包含<iFrame>始终是距页面顶部 280 像素和距左侧 560 像素。

您应该真正阅读 css 定位基础知识。几个好的起点可能是

• http://www.barelyfitz.com/screencast/html-training/css/positioning/
• http://www.w3schools.com/css/css_positioning.asp

Answer 2

定位绝对样式元素相对于整个页面的大小。因此，当页面变大时，div 会向左移动（left:560）。您可以改用相对位置：

margin-top: -530px;
position: relative;

或者

position: relative;
top: -530px;

或者

margin-left: -120px;(because this div has a width of 240px)
position: absolute;
left: 50%;