상대적으로 위치한 div가 고정 div를 다루는 이유는 무엇입니까?

Question

상대적으로 위치한 div가 고정 된 div를 덮는 이유는 무엇입니까?

HTML (상대적으로 고정 된 DIV 포장 콘텐츠)

<div id="topheading"> 
    Example Example Example Example Example Example Example Example 
</div> 
<div class="main"> 
<div class="centerpage"> 
     <div class="contentbox1"> 
      Test 
     </div> 
     <div class="contentbox1"> 
      Test 2 
     </div> 
     <div class="contentbox1"> 
      Test 3 
     </div> 
</div> 
</div> 

CSS 고정 위치 DIV가 적용된다

#topheading { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    height: 58px; 
    width: 100%; 
    background-color: rgba(194, 194, 194, .5); 
} 

.main { 
    position: relative; 
    width: 100%; 
} 

.centerpage { 
    width: 99%; 
    background: #ccc; 
    overflow: hidden; 
    margin-top: 62px; 
    margin-bottom: 2px; 
    margin-left: auto; 
    margin-right: auto; 
} 

.contentbox1 { 
    float: left; 
    width: 99%; 
    background: #448; 
    min-height: 200px; 
    border: solid black 2px; 
} 

JSFiddle

: 여기

은 일례이며 당신이 내려갈 때 상대적으로 위치 된 div; 어째서?

Answer 1

divs의 Z- 인덱스는 구문 분석 순서에 의해 암시 적으로 설정되기 때문에 이것이라고 생각합니다. 즉,

<div class="main"> 
    <div class="centerpage"> 
     <div class="contentbox1"> 
      Test 
     </div> 
     <div class="contentbox1"> 
      Test 2 
     </div> 
     <div class="contentbox1"> 
      Test 3 
     </div> 
    </div> 
</div> 
<div id="topheading"> 
    Example Example Example Example Example Example Example Example 
</div> 

것 같습니다.

편집 : 다른 사람들이 말한 것처럼, 이것을 표현하는 표현 방법은 z- 색인을 사용하는 것입니다.

#topheading { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    height: 58px; 
    width: 100%; 
    background-color: rgba(194, 194, 194, .5); 
    z-index:1; 
} 

[고정/CSS 절대 위에 위치 대하여]의