当我调整浏览器大小时，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>的{​​{1}}始终距离页面顶部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%;