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

Question

我希望我的#club-box位于顶部:: before box然后#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