css - 異なる画面解像度で移動するページ要素

Question

これは私のサイトhttp://lostlegendsmc.net76.net/index.htmlです。画面サイズが移動するときに、絶対に配置された要素が移動しないようにする方法はありますか? 私はすでにそれらをラップしようとしましたが、うまくいかなかったので、今は完全に立ち往生しています

Answer 1

ハードコーディングされた幅と高さ、および絶対位置を使用して、すべてを div でラップできます。その場合、すべてのコンテンツを含む親が実際にはドキュメント フローの外にあり、常に同じサイズであると仮定すると、要素が移動することはありません。

絶対要素は、その親に対して絶対位置に配置されるため、親が絶対位置と固定幅と高さを持っている場合、画面サイズが変化してもそのコンテンツが移動するのを防ぎます。

サイズと絶対配置のハードコーディングはオプションです: http://jsfiddle.net/gespinha/f6zPy/1/

HTML

<div id="wrapper">
    <div id="one"></div>
    <div id="two"></div>
</div>

CSS

#wrapper {
    width:1024px;
    height:1024px;
    position:absolute;
    background:#00f;
}
#one, #two {
    width:100px;
    height:100px;
    position:absolute;
}
#one {
    background:#f00;
    top:300px;
    left:0;
}
#two {
    background:#0f0;
    top:500px;
    right:0;
}