z-index will not change regardless of positioning or index number

Question

Relatively knew to z-index.

I cannot for the life of me get the following Div to lay on top of my footer. I have experimented with the z-index (I am aware that both elements need to have position: relative/absolute to work) and no matter what, the bottom half of my div still lays under the footer. For some reason the button goes over everything and only this button seems to be affected by z-index!

Here is my code:

http://jsfiddle.net/dyhg24mo/8/

HTML:

<!--CTA DIV-->
  <div id="ctaDiv">
    <h1>Ready To Build Your Community?</h1>
    <button>Get Started For Free</button>
  </div>

  <footer>
    <p class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
      Coded by <a href="#">Your Name Here</a>.
    </p>
  </footer>

CSS:

        /*CTA Section*/

    #ctaDiv {
    position: relative;
    z-index: 2;
    top: 90px;
    border-radius: 15px;
    margin: 0 auto;
    text-align: center;
    height: 200px;
    width: 600px;
    -webkit-box-shadow: 2px 2px 16px 8px rgba(0,0,0,0.1);
    -moz-box-shadow: 2px 2px 16px 8px rgba(0,0,0,0.1);
    box-shadow: 2px 2px 16px 8px rgba(0,0,0,0.1);
    }

    #ctaDiv h1 {
        font-size: 1.5em;
        padding-top: 50px;
    }

    #ctaDiv button {
        background-color: #FE52C0;
        border: none;
        color: white;
        font-family: 'Poppins', sans-serif;
        border-radius: 50px;
        height: 55px;
        width: 300px
    }


    /*FOOTER*/

    footer {
        position: relative;
        z-index: 0;
        height: 400px;
        width: 100%;
        background-color: #00252E;
    }

    .attribution {
        clear: both;
        font-size: 11px;
        text-align: center;
      }

      .attribution a {
        color: hsl(228, 45%, 44%);
      }

I have had a look at similar issues on stackoverflow but cannot find any that match mine.

Does anyone have an idea? I have a feeling its staring at me in the face

Answer 1

You simply forgot to set a background-color for the div... being transparent, it looks as though it is under the footer, while it is indeed on the top of the latter.

Cheers.