CSS 레이아웃의 문제 Z- 색인 속성

Question

내 # club-box가 맨 위에 있고 그 다음에 # 상자 앞에 있고 #club에 있어야합니다. 나는 Z-index 속성으로 이것을 시도했다. 내 코드가 잘못되었습니다. 그것은 부모의 뒤에 당신은 의사 요소를 만들 수 없습니다

#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

http://codepen.io/anon/pen/wBzJBW HTML

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

CSS가 나타납니다.

체크 아웃이 관련 질문 :

Z Index a pseudoelement behind it's parent