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

时间:2013-09-09 23:51:32

标签: css position elements absolute

这是我的网站http://lostlegendsmc.net76.net/index.html。是否有任何方法可以保持绝对定位的元素在屏幕大小时移动。我已经尝试包装它们,但是没有用,所以我现在完全被卡住了

1 个答案:

答案 0 :(得分:0)

您可以将所有内容都包装在具有硬编码宽度和高度以及绝对定位的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;
}