javascript - 仅在移动设备上位于文本后面的按钮

Question

我正在尝试做一个像这样的非常简单的测验:

https://www.sitepoint.com/simple-javascript-quiz/

我试图让它更具响应性并添加了这一行:

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

它工作正常，但是当我在每个问题的备选方案上添加长文本时，“下一个问题”按钮留在文本后面，仅在移动设备(iphone 6，safari)上。

我尝试添加一个 z-index: 1000;没有任何改变:

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;
    z-index:1000;
}

Answer 1

所以，这里有一些问题。如上所述，您需要从 .quiz-container 中删除高度并从 .slide 中删除绝对定位。

我建议您将 display: none; 添加到 slide 然后将您的事件样式添加到 display:block - 这将正确在应有的位置显示按钮。话虽如此，您将失去淡入淡出效果。您需要添加 this CSS把它拿回来。希望这对您有所帮助!

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

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

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