移动端（iPhone6 Safari）下「下一题」按钮被文本遮挡问题求助

嘿，我来帮你搞定这个按钮被遮挡的问题！你遇到的z-index无效的情况，核心原因很简单：z-index只有在元素设置了非静态定位（position: relative/absolute/fixed/sticky）时才会生效，你当前的按钮是默认的position: static，所以加了z-index也起不到层级提升的作用。

这里给你几个实用的解决方案：

方案1：给按钮添加相对定位，让z-index生效 #

只需要给按钮加上position: relative，就能激活z-index的作用，确保按钮在文本上方显示：

button{ 
  font-family: 'Work Sans', sans-serif; 
  font-size: 22px; 
  background-color: #279; 
  color: #fff; 
  border: 0px; 
  border-radius: 3px; 
  padding: 20px; 
  cursor: pointer; 
  margin-bottom: 20px; 
  position: relative; /* 新增：开启相对定位 */
  z-index: 1000; 
}

方案2：让按钮固定/粘性定位在视口底部（更适配移动端） #

如果想彻底避免按钮被内容挤到可视区域外，推荐用position: sticky让按钮始终停留在屏幕底部，这样不管文本多长，按钮都能保持可见：

button{ 
  font-family: 'Work Sans', sans-serif; 
  font-size: 22px; 
  background-color: #279; 
  color: #fff; 
  border: 0px; 
  border-radius: 3px; 
  padding: 20px; 
  cursor: pointer; 
  margin-bottom: 20px; 
  position: sticky; /* 粘性定位 */
  bottom: 20px; /* 按钮距离屏幕底部的距离 */
  z-index: 1000; 
  width: 100%; /* 让按钮占满容器宽度，适配移动端 */
  box-sizing: border-box; /* 防止padding撑宽按钮，保证宽度准确 */
}

方案3：增加选项与按钮的间距 #

除了层级调整，也可以给选项容器添加足够的底部间距，从布局上避免文本和按钮重叠：

/* 假设你的选项容器类名为option-container */
.option-container {
  margin-bottom: 80px; /* 留出足够空间给按钮 */
}

你可以先试试方案2，它是最适配移动端场景的，能确保按钮始终在用户视野内～

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