css - Why do relatively positioned divs cover fixed divs? -

why relatively positioned divs cover fixed positioned divs?

here example:

html (with relatively fixed div wrapping content)

<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

#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

the fixed positioned div becomes covered relatively positioned div when scroll down; how come?

i believe because z-index of divs implicitly set order in parsed. say,

<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> 

seems solve problem.

edit: though, others have stated, more expressive way solve use z-index.

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