我遇到了一个令人沮丧的问题,即当在不同的屏幕分辨率下查看时,绝对定位的元素会移动。
我的元素是根据 body 元素的百分比定位的。使用百分比肯定会使元素保持在同一位置吗?
我的页面:http://www.superfreebingo.com/advent-landing/
如何使用绝对定位,但在不同的分辨率下将元素保持在同一位置?
最佳答案
问题是一个图形场景,就像您要构建的场景一样,需要让每个元素都位于给定的坐标处才能使其具有视觉意义,因此取决于您的需求:
固定场景:给 body 元素一个固定的大小会产生一个固定的场景(用于定位元素的百分比总是相同的),尽管比场景小的屏幕会丢失完整的事情。
响应式场景:由于每个元素都必须有一个给定的相对坐标,因此仅使用水平或垂直定位是没有用的,因为它们只占两个数字之一的坐标。此外,您必须考虑图像大小,因为平板电脑需要看到比台式机更小的场景版本。
这很棘手但并非不可能,我建议您从固定场景开始,然后尝试为其添加响应,或者使用 JS 计算场景大小(宽度始终为 100%,必须计算高度)或“transform: scale(...)”css 属性。
关于css - 在不同分辨率下保持绝对定位元素在相同位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33433148/