移动端布局问题：position:relative设置后元素异常且子元素不显示

核心问题分析 #

1. 元素定位偏移：.middle 的 transform: translate(50%, 50%) 会让元素从父元素50%位置再向右向下偏移自身50%，直接导致元素跑到角落，需用负偏移实现居中。
2. 百分比高度失效：html 和 body 未设置高度基准，使得 .hm_maincontainer 和 .hm_buttoncontainer 的 height: 30% 没有参照对象，实际高度为0，绝对定位子元素自然无法显示。
3. 按钮容器子元素无高度：.hm_buttonblock 等子元素未设置高度或布局规则，导致背景色无法呈现。

修复后的代码 #

CSS 代码

/* 先设置全局高度基准 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 600px) {
  .middle {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* 修正居中偏移逻辑 */
  }
  body {
    display: block;
    position: relative;
  }
  .hm_maincontainer {
    position: relative;
    height: 30vh; /* 用vh更直观，或基于body的100%高度设置 */
    width: 90%;
    margin: 1rem auto;
    background-color: sienna;
    /* 后续要让主容器叠在后方时，添加 z-index: 0; */
  }
  .hm_mainspacer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: purple;
  }
  .hm_buttoncontainer {
    position: relative;
    height: 30vh;
    width: 90%;
    margin: 0 auto;
    background-color: salmon;
    /* 后续叠层需求：添加 z-index: 1; 即可让按钮容器在主容器上方 */
  }
  .hm_buttonblock {
    background-color: blue;
    height: 25%; /* 四个按钮均分容器高度 */
    box-sizing: border-box;
    border: 1px solid #fff;
  }
  .hm_buttonspacer {
    background-color: red;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .hm_buttonimg {
    background-color: yellow;
    width: 40px;
    height: 40px;
  }
  .hm_buttontext {
    background-color: green;
    margin-top: 0.5rem;
    padding: 0.2rem 0.5rem;
  }
}

HTML 代码（保持原结构即可）

<div class="hm_maincontainer">
  <div class="hm_mainspacer middle">
    <div class="hm_main"></div>
  </div>
</div>
<div class="hm_buttoncontainer">
  <div class="hm_buttonblock">
    <div class="hm_buttonspacer">
      <div class="hm_buttonimg"></div>
      <div class="hm_buttontext"></div>
    </div>
  </div>
  <div class="hm_buttonblock">
    <div class="hm_buttonspacer">
      <div class="hm_buttonimg"></div>
      <div class="hm_buttontext"></div>
    </div>
  </div>
  <div class="hm_buttonblock">
    <div class="hm_buttonspacer">
      <div class="hm_buttonimg"></div>
      <div class="hm_buttontext"></div>
    </div>
  </div>
  <div class="hm_buttonblock">
    <div class="hm_buttonspacer">
      <div class="hm_buttonimg"></div>
      <div class="hm_buttontext"></div>
    </div>
  </div>
</div>

后续层级调整说明 #

要实现主容器叠在按钮容器后方，只需给 .hm_buttoncontainer 添加 z-index: 1，同时给 .hm_maincontainer 设置 z-index: 0（或利用默认层级：未设置z-index的元素，后渲染的会叠在前面，也可直接给主容器设置更低的z-index值）。

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