响应式布局问题：小屏红盒在图前，大屏红盒在图上

需求 #

小屏幕下红色内容盒（.content）显示在图片前方；大屏幕下红色内容盒显示在图片上方。

现有问题 #

• 调整前HTML：小屏幕时内容盒位于图片下方，不符合需求。
• 调整后HTML：小屏幕显示正常，但大屏幕下内容盒消失，设置z-index也无效。

问题原因 #

1. 偏移量计算错误：大屏幕下使用margin-top: -15%，而CSS中margin的百分比值是基于父元素宽度计算的，不是高度。若父元素宽度较大，这个负值会让内容盒向上偏移过多，甚至移出视口，导致视觉上“消失”。
2. z-index生效条件：z-index仅对设置了非static定位的元素生效，虽然大屏幕下内容盒设置了position: absolute，但如果元素偏移出视口，z-index再高也无法显示。

解决方案 #

步骤1：保持HTML顺序 #

使用调整后的HTML，确保小屏幕下内容盒自然排在图片前方：

<div class="wrapper">
  <p class="content">
    Here is very important info about point
  </p>
  <img src="https://www.edrawsoft.com/templates/images/city-street-map.png">
  <a class="point"></a>
</div>

步骤2：修改CSS代码 #

修正定位方式，用top/left替代margin，确保偏移量基于父元素高度计算：

.wrapper {
  position: relative;
  display: inline-block;
}

.wrapper>img {
  width: 700px;
  height: auto;
  max-width: 700px;
  max-height: 459px;
  position: relative;
  z-index: 1;
}

.point {
  width: 15px;
  height: 15px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  left: 4.92%;
  top: calc(100% - 8.02%); /* 基于父元素高度计算定位 */
  z-index: 15;
}

/* 小屏幕默认样式：内容盒在图片前方 */
.content {
  background-color: red;
  padding: 10px;
  z-index: 15;
}

/* 大屏幕样式：内容盒定位到图片上方 */
@media screen and (min-width: 600px) {
  .content {
    position: absolute;
    left: 10%;
    top: -15%; /* 基于父元素高度计算向上偏移 */
    z-index: 15;
  }
}

关键优化点 #

• 小屏幕依赖HTML文档流顺序，无需额外定位，自然实现内容盒在图片前方。
• 大屏幕使用position: absolute配合top/left，top的百分比基于父元素高度计算，偏移位置更精准，避免出界。
• 统一用top/left替代margin定位.point，避免同样的百分比计算误差。
• 确保所有需要层叠控制的元素都设置了非static定位，z-index能正确生效。

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