适配全屏幕尺寸的文本块CSS定位问题求助

你的问题核心是定位逻辑出错了——用了fixed定位（相对于浏览器视口），但你要的是**相对于背景容器（.banner1）**的左下角，而且之前设置的bottom: -1000%这种极端偏移值完全没必要，反而导致位置混乱。

直接替换成下面的代码，就能让描述框牢牢钉在背景图左下角，完美适配所有屏幕：

/* 背景容器保持相对定位，作为内部元素绝对定位的参考基准 */
.banner1 {
  position: relative;
  /* 确保容器撑满背景图高度，根据你的实际背景图调整，全屏背景就用下面这个 */
  min-height: 100vh;
}

/* 描述框基础样式：绝对定位到父容器左下角 */
.huaxin1 {
  position: absolute;
  bottom: 20px; /* 距离容器底部的间距，可按需调整 */
  left: 20px; /* 距离容器左侧的间距，可按需调整 */
  width: 80%; /* 小屏幕默认占80%宽度 */
  padding: 1rem;
  box-sizing: border-box; /* 确保内边距不会撑大盒子宽度 */
}

/* 大屏幕（30em=480px以上）调整尺寸和间距 */
@media only screen and (min-width: 30em) {
  .huaxin1 {
    width: 300px; /* 固定宽度 */
    padding: 1rem 2rem 1rem 1rem;
    bottom: 40px; /* 加大底部间距 */
    left: 40px; /* 加大左侧间距 */
  }
}

关键调整说明： #

• 把position: fixed改成position: absolute，这样描述框会严格相对于.banner1（父容器，relative定位）定位，不会随视口变化乱跑。
• 删掉了left: -50%、bottom: -1000%这类错误偏移值，直接用left和bottom设置距离容器边缘的固定间距。
• 新增box-sizing: border-box，确保内边距不会让盒子宽度超出设置值，避免小屏幕上内容溢出。
• 移除了多余的min-width: 0px媒体查询，小屏幕的基础样式已经适配，只需要针对大屏幕做细节调整即可。

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