CSS位置：绝对屏幕分辨率问题

Question

CSS代码：

top:45;
left:98;
float:right;
position:absolute;z-index:2;

当我使用1024分辨率时，我已经完成了浮动div的上述编码，但是当我在不同的分辨率上测试相同时，它就不对齐了。

我们如何解决？

Answer 1

绝对定位的元素根据相对定位的祖先或窗口定位。听起来像是在你的情况下，它被放置在窗口中。

解决此问题的方法是将绝对定位的<div>放在相对容器中。这样，当窗口改变大小时，它将保持在正确的位置：

<div style="position: relative">
    <div style="position: absolute; left: 98px; top: 45px;">
         This div will always be 98px from the left and 45px from the top of its parent .
    </div>
</div>

Answer 2

以上解决方案均不适合我...... 将其保留在绝对位置并在％age 中提供 margin-top，margin-left ......;

margin-top:10%;
margin-left:5%;

将自动调整w.r.t.屏幕分辨率...

这对我来说非常完美。测试了不同的分辨率。

玩得开心！

Answer 3

使用%而不是像素。它可以帮助您生成输出。

Answer 4

假设元素不包含在具有相对位置的另一个元素中，则无论分辨率如何，您定位的元素都应位于相同的位置。

确保使用：

top: 45px
left: 98px

您在上面的代码中关闭了像素声明。

此外，在定位元素上不需要float：right，因为position：absolute将使它从文档的正常流程中取出。

Answer 5

我有同样的问题，但它通过将宽度 100% 添加到父 div 来解决。