移动端特定宽度absolute定位div偏移问题：如何实现跨设备固定位置？

问题背景 #

我有一个设置了background-size: contain的背景图容器，还有一个position: absolute的.disclaimer div。切换到移动端屏幕时，这个div会向左偏移，无法保持在背景图上的预期固定位置。

问题原因 #

当前.disclaimer是基于<body>进行绝对定位的，使用了固定百分比的right值和固定像素宽度。而背景图用contain属性后，在不同屏幕尺寸下，背景图的实际显示尺寸会和<body>的尺寸比例产生差异，导致基于<body>的定位无法匹配背景图的位置，最终出现偏移。

解决方案 #

方法一：将绝对定位元素嵌套进背景图容器（推荐） #

把.disclaimer放到背景图容器#fase_0内部，让它相对于背景图容器定位，这样不管背景图怎么缩放，div的相对位置都能保持一致。

修改后的代码：

body{
    background-color: #000;
    text-align: center; 
    margin: 0;
}
           
#fase_0 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(https://i.imgur.com/FJxBokN.png);
    background-size: contain;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    position: relative; /* 添加相对定位，作为子元素的定位参考 */
}

.disclaimer {
    position:absolute;
    right:33%; 
    top:9%; 
    width: 30%; /* 改用百分比宽度，自适应屏幕 */
    max-width: 420px; /* 限制最大宽度，避免桌面端过宽 */
    height:200px; 
    overflow: auto;
    text-align: left; 
    font-size: 12px;
    color: #8f8f8f;
    font-family: "DejaVu Serif";
}

<div id="fase_0">        
    <div class="disclaimer">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.
    </div>
</div>

方法二：使用媒体查询适配移动端（不修改DOM结构） #

如果不想调整DOM结构，可以针对移动端屏幕尺寸，修改.disclaimer的定位值和宽度，让它匹配背景图的缩放比例：

/* 针对移动端的媒体查询，比如屏幕宽度小于768px时 */
@media (max-width: 768px) {
    .disclaimer {
        right: 15%; /* 调整right值匹配背景图位置 */
        width: 60%; /* 调整宽度适配移动端 */
    }
}

说明 #

方法一的优势在于，元素定位完全基于背景图容器，不需要针对不同屏幕写大量媒体查询，能自动适配所有尺寸；方法二更适合无法修改DOM结构的场景，但需要手动调整不同断点的参数。

内容的提问来源于stack exchange，提问作者Prest89