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%;