I created a front-end calculator, and added a "Launch Instructions" button at the bottom of the page. The button expands into a modal when clicked, displaying instructions to operate the calculator.
Here's part of the footer HTML
<div id="instructions">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">
Launch Instructions
</button>
I fixed
the position
of the footer near the bottom of the screen, but I didn't comprehend that it would remain at the same place even when the browser is scaled down, thereby causing the footer to appear over the calculator itself.
Here's the footer css -
#instructions {
position: fixed;
left: 44%;
bottom: 0px;
z-index: 1049;
font-family: 'Courgette', cursive;
}
#instructions button {
text-transform: uppercase;
opacity: 0.6;
}
And here's the complete app on Codepen.
I'm not sure how to make the footer and the "launch instructions" button stay below the calculator, even when the screen is shrunk down. Maybe I need a media query that changes the z-index
of the button
?
@media screen and (max-height: 300px) {
#instructions button {
z-index: -1;
}
}
Many thanks!
Just do the following:
z-index
to 1
for #instructions
.z-index: 2
for #wrapper
.CSS
#instructions {
z-index: 1;
}
#wrapper {
z-index: 2;
}
Preview
CodePen: http://codepen.io/anon/pen/vyGPRR