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

Posted 2023-03-06

【中文标题】仅在移动设备上的文本后面的按钮

【英文标题】：Button behind text only on mobile

【发布时间】：2018-06-19 20:11:55

【问题描述】：

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

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;

【问题讨论】：

尝试在z-index 之外添加position: relative（z-index 仅适用于非静态定位的元素）。

位置后：相对文本在按钮后面，但我无法阅读文本。如何强制按钮停留在文本下方（我的意思是在文本之后）？

检查我的答案@Rodrick - 应该解决你的问题:)

感谢@Xoog，它有效。你能帮我看看淡化效果吗？我从提到的链接中添加了 Chris 的答案中的 CSS。我应该做更多的事情吗？

【参考方案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;

【参考方案2】：

您将position: absolute 设置为您的测验问题，因此他们将忽略您在 html 中设置的每个元素的空格。 一个大的z-index 只会将一个元素放在另一个元素之上，这就是为什么您会在按钮上方看到测验问题。 增加手机屏幕上quiz-container的高度即可解决问题（尝试使用@media screen）。

https://www.w3schools.com/cs-s-ref/css3_pr_mediaquery.asp

我建议您找到另一种方式将您的问题放在页面顶部，而不是使用position: absolute

【参考方案3】：

问题实际上是您的测验容器 div 具有 200 像素的固定高度，并且您无法使其流动，因为您的幻灯片具有 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;