Javascript 仅移动设备上文本后面的按钮

我试着做一个非常简单的测验，像这样：

我试图让它更具响应性，并添加了以下内容：

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>

---

所以，这里有一些问题。如上所述，您需要从

.quick container

中删除高度，并从

.slide

中删除绝对位置

我建议您添加

display:none至
幻灯片
，然后将活动样式切换至
显示：块
-这将正确显示按钮所在的位置。这样一来，您将失去淡入淡出效果。您需要添加才能将其取回。希望这有帮助

.quiz-container {
position: relative;
margin-top: 40px;
}

.slide {
width: 100%;
opacity: 0;
display: none;
}

.active-slide {
opacity: 1;
display: block;
}

您将
position:absolute
设置为测验问题，因此他们将忽略您在HTML中设置的每个元素的空格。
一个大的
z-index
只会将一个元素置于另一个元素之上，这就是为什么你会在按钮上方看到测验问题。
如果您在移动屏幕上增加
测验容器的高度（尝试使用
@media-screen
），问题将得到解决


我建议您找到另一种方法将问题放在页面顶部，而不是使用
position:absolute
问题在于您的测验容器div的固定高度为200px，您无法使其流动，因为您的幻灯片有position:absolute，这会将它们从流中移除，并阻止父对象相应地增加高度

所以你需要重新思考如何去做

一种有趣的方法是使用flexbox，通过
order
属性控制要显示的幻灯片

.quiz-container {
    margin-top: 40px;
    overflow: hidden;
}

#quiz{
    display: flex;
}
.slide {
    opacity: 0;
    transition: opacity 0.5s;
/*gives each slide 100% width and prevents it from growing or shrinking*/
    flex: 0 0 100%; 
}

.active-slide {
    opacity: 1;
    /*sets the order to -1, so it's positioned before all other flex-items*/
    order: -1;
}

尝试在
z-index
之外添加
position:relative
（z-index仅适用于非静态定位的元素）。position:relative之后，文本位于按钮后面，但我无法读取文本。我如何才能强制按钮停留在文本下方（我是说在文本之后）？检查我的答案@Rodrick-应该解决您的问题：）谢谢@Xoog它可以工作。你能帮我做一下褪色效果吗？我在上面提到的链接中添加了Chris回答中的CSS。我应该多做点什么吗？
.quiz-container {
    margin-top: 40px;
    overflow: hidden;
}

#quiz{
    display: flex;
}
.slide {
    opacity: 0;
    transition: opacity 0.5s;
/*gives each slide 100% width and prevents it from growing or shrinking*/
    flex: 0 0 100%; 
}

.active-slide {
    opacity: 1;
    /*sets the order to -1, so it's positioned before all other flex-items*/
    order: -1;
}