Позиция Css фиксированная в заголовке скрывает содержимое

Question

Я создаю новый сайт, и у меня проблема с заголовком ... Я устанавливаю позицию заголовка на исправление, и это работает, но содержимое под заголовком скрыто. Я попытался переместить содержимое вниз с margin-top: 10px, но все, что он сделал, это переместить заголовок вниз.

Ссылка на jsfiddle:

http://jsfiddle.net/vwzhda41/

Answer 1

Дайте padding-top:58px; к .responsiveContainer и добавить top:0; - .header.

Jsfiddle

.responsiveContainer { 
    width: 100%; 
    // Add padding top 
    padding-top: 58px; 
} 

.header { 
    background-color: #000000; 
    padding: 10px; 
    padding-left: 0; 
    padding-right: 0; 
    box-shadow: 0 5px 0 #232323; 
    text-align: center; 
    width: 100%; 
    position: fixed; 
    // Add top 0 
    top: 0; 
} 

По MDN:

фиксированной

Не оставляйте пространство для элемента. Вместо этого расположите его на указанной позиции относительно экрана просмотра экрана и не перемещайте его при прокрутке. При печати разместите его в этом фиксированном положении на странице на каждой странице. Это значение всегда создает новый контекст стекирования.

Answer 2

Попробуйте использовать

padding-top: 58px;/*the height of the header*/` 

вместо

margin-top:10px; 

Answer 3

/* Copyright © 2015 Dynavio */ 
 

 
/* Main Site Settings */ 
 

 
*, 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
body { 
 
    background-color: #FFFFFF; 
 
} 
 
.responsiveContainer { 
 
    width: 100%; 
 
} 
 
/* End Of Main Site Settings */ 
 

 
/* Header */ 
 

 
.header { 
 
    background-color: #000000; 
 
    padding: 10px; 
 
    padding-left: 0; 
 
    padding-right: 0; 
 
    box-shadow: 0 5px 0 #232323; 
 
    text-align: center; 
 
    width: 100%; 
 
    position: fixed; 
 
} 
 
.navbar { 
 
    background-color: #131313; 
 
    padding: 10px; 
 
} 
 
.navElem { 
 
    display: inline; 
 
    margin: -2px; 
 
} 
 
.navLink { 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    padding-top: 11px; 
 
    color: #FFFFFF; 
 
    font-family: SinkinSans; 
 
    transition: all 0.5s; 
 
    -moz-transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
    -o-transition: all 0.5s; 
 
} 
 
.navLink:hover { 
 
    background-color: #0044FF; 
 
    box-shadow: 0 5px 0 #01268A; 
 
} 
 
.navLink:visited { 
 
    color: #FFFFFF; 
 
} 
 
.active { 
 
    background-color: #0044FF; 
 
    box-shadow: 0 5px 0 #01268A; 
 
} 
 
/* End Of Header */ 
 

 
/* Site Content */ 
 

 
.startBox { 
 
    background-color: #0044FF; 
 
    position: relative; 
 
    top: 50px; 
 
} 
 
/* End Of Site Content */ 
 

 
/* Alignment Classes */ 
 

 
.alignLeft { 
 
    text-align: left; 
 
} 
 
/* End Of Alignment Classes */

<div class="responsiveContainer"> 
 
    <div class="header"> 
 
    <div class="navbar"> 
 
     <ul> 
 
     <li class="navElem"><a href="#" class="navLink active">Home Page</a> 
 
     </li> 
 
     <li class="navElem"><a href="#" class="navLink">Our Products</a> 
 
     </li> 
 
     <li class="navElem"><a href="#" class="navLink">Contact Us</a> 
 
     </li> 
 
     <li class="navElem"><a href="#" class="navLink">About Us</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div class="startBox"> 
 
    <p>dwddwwdwdd</p> 
 
    </div> 
 
</div>

Answer 4

Вам нужно положить <div class="header"> внутри DIV с определенной высотой, как:

<div class="heightTest"> 
<div class="header"> 
    <div class="navbar"> 
     <ul> 
      ... 
     </ul> 
    </div> 
</div> 
</div> 

и CSS:

.heightTest{height:90px;} 

Jsfiddle: http://jsfiddle.net/vwzhda41/2/