Button behind text only on mobile

Question

I am trying to do a very simple quiz like this one:

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

I tried to make it more responsive and added this line:

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

It worked fine but when I add a long text on the alternatives of each question, the button "Next Question" stay behind the text, only on mobile (iphone 6, safari).

I tried to add a z-index: 1000; and nothing changed:

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;
}

Try adding `position: relative` in addition to a `z-index` (z-index only applies to non-statically positioned elements). — delinear, Jan 10 '18 at 15:46
After position: relative the text is behind the button, but I cannot read the text. How can I force the button to stay under the text (I mean after the text)? — Rodrick, Jan 10 '18 at 15:56
Thanks @Xoog it works. Could yo give me a hand with the fade effect? I added the CSS from Chris's answer from the link mentioned. Should I do something more? — Rodrick, Jan 12 '18 at 04:56

Xoog · Accepted Answer · 2018-01-10T16:48:23.237

So, there's a few things wrong here. As said above you need to remove the height from .quiz-container and remove the absolute positioning from .slide.

What I would suggest is that you add display: none; to slide then your active style to display:block - this will correctly display the button where it should be. With that said, you will lose the fade effect. You'd need to add this CSS to get it back. Hope this helps!

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

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

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

Juliano Dotto · Answer 2 · 2018-01-10T16:17:37.217

You set position: absolute to your quizz questions, so they will ignore the space of every element you set in HTML. A large z-index will only put an element above another, that's the why you see the quizz questions above the button. The problem will be solved if you increment the height of quiz-container on mobile screen (try use @media screen).

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

I recomend you to find another way to put your questions at the top of page instead using position: absolute

score 0 · Answer 3 · answered Jan 10 '18 at 16:49

The problem really is that your quiz-container div has a fixed height of 200px, and you can't make it fluid because your slides have position:absolute, which removes them from the flow and prevents the parent growing in height accordingly.

So you need to re-think how to go about this.

An interesting approach would be to use flexbox, controlling which slide to show with the order property.

.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;
}

Button behind text only on mobile

3 Answers3