以不同屏幕分辨率移动的页面元素

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