无论定位或索引号如何，z-index 都不会改变

Question

对z-index比较了解。

我这辈子都无法将以下 Div 置于页脚之上。我已经尝试过 z-index（我知道这两个元素都需要有 position: relative/absolute 才能工作），无论如何，我的 div 的下半部分仍然位于页脚下方。出于某种原因，该按钮会覆盖所有内容，并且只有此按钮似乎受 z-index 影响！

这是我的代码：

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

我在 Whosebug 上看过类似的问题，但找不到与我相符的问题。

有人有想法吗？我有种它在盯着我看的感觉

Answer 1

你只是忘了为 div 设置背景颜色...透明，看起来好像在页脚下面，而实际上它在页脚的顶部。

干杯。

无论定位或索引号如何，z-index 都不会改变

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

html

css

z-index