页面缩放或分辨率变化时Div与文本位置错乱问题求助

重构网站旧模块后，本地显示正常，但缩放页面或切换到非本地分辨率时，DailyMessage和DailySong两个Div及内部文本的布局位置会错乱。

正常显示效果：

缩放/不同分辨率下的异常效果：

相关代码 #

HTML代码

<div>
<div class="DailyMessage">
<p style="color:black;font-size:115%;font-weight:bold">Today's Daily Message</p>
<p style="color:black;font-size:115%">Don't beat yourself because of others</p>
<p style="color:black;font-size:115%">Even if they're "family", because everyone around you</p>
<p style="color:black;font-size:115%">that cares and looks for you is your family</p>
<p style="color:black;font-size:115%">Bloodline doesn't make a family.</p>
</div>

<div class="DailySong">
<p style="color:black;font-size:115%;font-weight:bold">Today's Daily Song Recommendation</p>
<a href="https://youtu.be/VSpgaN3wuag" target="_blank"><p style="color:green;font-size:115%">ZAYN - Vibez</p></a>
</div>

<img src="images/DailySpeech.png">
</div>

CSS代码

.DailyMessage {
position: absolute;
right: 44.50%;
bottom: 5.50%;
}

div.DailyMessage {
flex: 1;
}

.DailySong {
position: absolute;
right: 50.50%;
bottom: -24%;
}

div.DailySong {
flex: 1;
}

问题根源 #

1. 绝对定位参照错误：父容器未设置position: relative，导致两个文本模块的绝对定位以整个浏览器视口为参照，而非父容器。视口尺寸随缩放或分辨率变化时，固定百分比的定位值会直接导致元素位置偏移。
2. 冗余flex属性：绝对定位元素脱离正常文档流，不参与flex布局，设置flex:1完全无效，属于多余代码。
3. 固定百分比适配性差：right:44.50%这类精确到小数点的固定值，仅适配你本地的特定分辨率，换环境必然失效。

修复方案 #

步骤1：给父容器添加相对定位

让绝对定位的子元素以父容器为参照，避免随视口乱跑：

.parent-container {
  position: relative;
  /* 根据图片实际尺寸设置宽高，确保父容器能包裹内容 */
  width: 800px;
  height: 600px;
}

同时修改HTML，给父div加上类名：

<div class="parent-container">
  <!-- 原有的DailyMessage、DailySong、img内容 -->
</div>

步骤2：移除冗余flex属性

直接删除div.DailyMessage和div.DailySong中的flex:1规则。

步骤3：选用更适配的定位方式

推荐方案：用flex布局替代绝对定位

如果需求是文本模块与图片配合展示，flex布局的适配性更强，无需依赖固定百分比：

.parent-container {
  display: flex;
  align-items: flex-end; /* 内容靠底部对齐 */
  gap: 20px; /* 两个文本模块的间距 */
  width: 100%;
  max-width: 800px;
}

.DailyMessage, .DailySong {
  flex: 0 0 auto;
}

保留绝对定位的适配方案

若必须用绝对定位，需结合媒体查询针对不同分辨率调整定位值：

@media (max-width: 1024px) {
  .parent-container {
    width: 100%;
    height: auto;
  }
  .DailyMessage {
    right: 38%;
    bottom: 6%;
  }
  .DailySong {
    right: 44%;
    bottom: -18%;
  }
}

最终修改代码示例 #

HTML

<div class="parent-container">
<div class="DailyMessage">
<p style="color:black;font-size:115%;font-weight:bold">Today's Daily Message</p>
<p style="color:black;font-size:115%">Don't beat yourself because of others</p>
<p style="color:black;font-size:115%">Even if they're "family", because everyone around you</p>
<p style="color:black;font-size:115%">that cares and looks for you is your family</p>
<p style="color:black;font-size:115%">Bloodline doesn't make a family.</p>
</div>

<div class="DailySong">
<p style="color:black;font-size:115%;font-weight:bold">Today's Daily Song Recommendation</p>
<a href="https://youtu.be/VSpgaN3wuag" target="_blank"><p style="color:green;font-size:115%">ZAYN - Vibez</p></a>
</div>

<img src="images/DailySpeech.png">
</div>

CSS

.parent-container {
  position: relative;
  width: 800px;
  height: 600px;
}

.DailyMessage {
  position: absolute;
  right: 44.5%;
  bottom: 5.5%;
}

.DailySong {
  position: absolute;
  right: 50.5%;
  bottom: -24%;
}

/* 适配不同分辨率 */
@media (max-width: 1024px) {
  .parent-container {
    width: 100%;
    height: auto;
  }
  .DailyMessage {
    right: 38%;
    bottom: 6%;
  }
  .DailySong {
    right: 44%;
    bottom: -18%;
  }
}

内容的提问来源于stack exchange，提问作者June S. Sai