如何通过Media Query实现绝对定位透明Div的响应式适配？

问题场景 #

已通过以下方式实现两个div的层叠：将.content设置为position: relative，.visual设置为position: absolute并指定z-index: 1，让透明层置于内容层上方。但响应式适配时，绝对定位的.visual尺寸无法随屏幕变化，需要通过Media Query实现其响应式调整。

解决方案 #

核心思路是给绝对定位元素使用相对单位（如vw、百分比）定义基础尺寸，再通过Media Query针对不同屏幕断点调整尺寸、位置等属性，确保在各类设备上的布局合理性。

修改后的完整代码 #

CSS 代码

.main {
  display: flex;
}
.content {
  height: 200px;
  padding-left: 36px;
  padding-right: 100px;
  position: relative;
  flex: 1;
  background-color: lightblue;
}

.visual {
  /* 用相对单位vw定义基础尺寸，随屏幕宽度自适应 */
  width: 25vw;
  height: 40vw;
  position: absolute;
  z-index: 1;
  right: 24px;
  background-color: rgba(106, 132, 226, 0.1);
}

/* 针对平板及以下屏幕（768px断点）调整 */
@media (max-width: 768px) {
  .visual {
    /* 缩小尺寸，避免占满过多屏幕空间 */
    width: 20vw;
    height: 30vw;
    /* 调整右侧间距，适配窄屏 */
    right: 12px;
  }
  
  .content {
    /* 同步调整内容层的右侧内边距，避免内容被遮挡 */
    padding-right: 60px;
  }
}

/* 针对手机屏幕（480px断点）调整 */
@media (max-width: 480px) {
  .visual {
    /* 进一步缩小，或改为固定小尺寸 */
    width: 80px;
    height: 120px;
    right: 8px;
  }
  
  .content {
    padding-right: 40px;
    padding-left: 16px;
  }
}

HTML 代码

<div class="main">
  <div class="content">
    <h1 id="header">title</h1>
    <div class="description">
      <h3 id="description-text">Text</h3>
    </div>
  </div>

  <div class="visual">
    <h3>Transparent div</h3>
  </div>
</div>

关键说明 #

1. 相对单位基础设置：用vw（视口宽度的百分比）作为.visual的尺寸单位，能让元素默认随屏幕宽度等比例缩放，是响应式的基础。
2. 断点针对性调整：通过Media Query在不同屏幕宽度下，分别调整.visual的尺寸、右侧位置，同时同步修改.content的内边距，避免内容被透明层遮挡。
3. 灵活适配逻辑：如果需要更极端的适配（比如小屏幕下隐藏透明层），可以在Media Query中添加display: none属性。

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