фиксированный div получает поле вверх

Question

Исправлено: div спускается, когда я даю margin-top на div под ним ... почему?

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.header_bg { 
 
    width: 100%; 
 
    height: 100px; 
 
    position: fixed; 
 
    background: black 
 
} 
 
.container { 
 
    width: 960px; 
 
    height: auto; 
 
    margin: 0 auto 
 
} 
 
ul.menu { 
 
    list-style: none; 
 
} 
 
ul.menu li { 
 
    display: inline-block 
 
} 
 
ul.menu li a { 
 
    text-decoration: none; 
 
    color: white 
 
} 
 
.content { 
 
    margin-top: 140px 
 
}

<div class="header_bg"> 
 
    <div class="container"> 
 
    <ul class="menu"> 
 
     <li><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">About</a> 
 
     </li> 
 
     <li><a href="#">Service</a> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="content"> 
 
    /* Content Goes here*/ 
 
    </div> 
 
</div>

Answer 1

вам нужно добавить top:0 к вашему .header_bg, больше о position

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.header_bg { 
 
    width: 100%; 
 
    height: 100px; 
 
    position: fixed; 
 
    background: black; 
 
    top:0 
 
} 
 
.container { 
 
    width: 960px; 
 
    height: auto; 
 
    margin: 0 auto 
 
} 
 
ul.menu { 
 
    list-style: none; 
 
} 
 
ul.menu li { 
 
    display: inline-block 
 
} 
 
ul.menu li a { 
 
    text-decoration: none; 
 
    color: white 
 
} 
 
.content { 
 
    margin-top: 140px 
 
}

<div class="header_bg"> 
 
    <div class="container"> 
 
    <ul class="menu"> 
 
     <li><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">About</a> 
 
     </li> 
 
     <li><a href="#">Service</a> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="content"> 
 
    /* Content Goes here*/ 
 
    </div> 
 
</div>