Search code examples
csspositionz-indexfootersticky-footer

CSS: Footer appears over main content on browser size shrink


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!


Solution

  • Just do the following:

    • Change z-index to 1 for #instructions.
    • Add z-index: 2 for #wrapper.

    CSS

    #instructions {
      z-index: 1;
    }
    #wrapper {
      z-index: 2;
    }
    

    Preview

    preview

    CodePen: http://codepen.io/anon/pen/vyGPRR