设置div为position:absolute后元素被覆盖及移动端全屏适配问题

一、position:absolute后元素被覆盖的原因 #

• 脱离文档流：设置position: absolute的元素会完全脱离正常文档流，不再占据原有布局空间，后续元素会直接填充它的原位置，视觉上就呈现出“覆盖”效果。
• z-index层级问题：你给元素设置了z-index: -1，而正常文档流中的元素（比如你的按钮）默认z-index为0，层级比-1更高，因此会显示在absolute元素的上方。

二、小屏幕下按钮覆盖div的成因 #

在max-width:600px的媒体查询中，你给div添加了position: absolute和z-index: -1：div脱离文档流后，按钮占据了它的原位置，再加上z-index层级更低，自然就被按钮覆盖了。

三、小屏幕让div铺满屏幕的修正方案 #

先修正代码里的语法错误，再调整样式实现需求：

1. 修正无效CSS属性：padding:10px;10px;是错误写法，改为padding:10px;或padding:10px 10px;；
2. 修复媒体查询嵌套错误：你把600px的媒体查询写在992px的媒体查询内部，导致600px的规则仅在屏幕<=992px时生效，需分开写；
3. 调整定位与层级：去掉z-index: -1（或设为正数），添加top:0让div从视口顶部开始，同时重置body默认margin避免留白。

修正后的完整代码 #

/* 重置body默认边距，避免视口留白 */
body {
  margin: 0;
}

.qa-part-q-view { 
  border-radius:5px;
  border: solid #EBF2F7;
  min-height:70px; 
  align-items:left; 
  padding:10px; 
  margin: 10px 10px;
}  

/* 屏幕<=992px时的样式 */
@media screen and (max-width: 992px) {
  .qa-part-q-view {
    border: 2px solid #EBF2F7; 
  }
}

/* 屏幕<=600px时的样式 */
@media screen and (max-width: 600px) {
  .qa-part-q-view {
    position: absolute;
    left: 0;
    right: 0;
    top: 0; /* 让div从视口顶部开始 */
    border: 0 none #ccc;
    border-bottom: 5px solid #EBF2F7;
    border-top: 5px solid #EBF2F7;
    border-radius: 0;
    padding:10px; 
    margin: 0;
    /* 如需铺满整个视口高度，添加以下代码 */
    /* bottom: 0; */
  }
}

<div class="qa-part-q-view">
  <p>jjjjjjjjjj</p> 
</div> 
<button>kkkfkf</button>

补充说明 #

• 若只需div铺满宽度而非高度，保留min-height:70px即可；如需铺满整个视口高度，添加bottom:0。
• 若希望按钮不被div覆盖，可在小屏媒体查询中给按钮设置margin-top，或调整按钮的定位布局，根据实际需求灵活修改。

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