html - css 布局 z-index 属性中的问题

Question

我希望我的#club-box 位于顶部，然后是::before 框，然后是#club。我已经通过 z-index 属性尝试过这个。我的代码有什么问题。 http://codepen.io/anon/pen/wBzJBW HTML

<div id="club">
    <div class="club-box"> </div>
</div>

CSS

#club {
    z-index: -10000;
    display: block;
    clear: both;
    width: 100%;
    height: 648px;
    background-color: aquamarine;
}

.club-box { 
    z-index: 1000;
    border-radius: 5px;
    display: inline-block;
    margin: 20px;
    width: 300px;
    height: 200px; 
    background: #768;
    position: relative;
}

.club-box::before {
  z-index: 10;
    content: "";
    position: absolute;
    top: 106px;
    left: 17px;
    z-index: 100;
    width: 263px;
    height: 124px;
    background-color: black; 
}

Answer 1

你不能让一个伪元素出现在它的父元素后面。

查看这个相关问题:

Z Index a pseudoelement behind it's parent