Перемещение элементов DOM под фиксированной навигационной панелью

Question

У меня есть фиксированная панель навигации, однако в любое время, когда я пытаюсь создать контент после него, контент захватывает навигацию.

Я мог бы исправить это, используя относительное позиционирование по контенту, но я бы предпочел НЕ делать это.

Как я могу нажимать контент под фиксированной навигационной панелью, не прибегая к странной тактике CSS?

Пример Навигация:

nav{ 
    position:fixed; 
    top:0; 
    width:100%; 
    border:1px solid black; 
} 

Ввод класса контента может быть обманчива, по существу, я хочу DOM элементов потока после навигационной панели, не обрезая ее. Например, представьте себе следующий HTML приходит после того, как нав:

<section>foo</section> 
<p>bar</p> 
<h2>fubar</h2> 
<div>blah blah blah </div> 

Я хотел бы видеть раздел прийти после того, как панель навигации, а затем р после секции и так далее.

Оригинал Пример задачи (не Светоотражающие проблемы): http://jsfiddle.net/wZHcv/

Новый Fiddle: http://jsfiddle.net/4MLVT/

Answer 1

Вы можете поместить нав внутри DIV, а затем установить высоту DIV по высоте нав. Преимущество этого: легче и более значимые, и в других местах, вы можете использовать другой код без проблем ..

<div class="nav-box"> 
    <nav> 
     <ul> 
      <li><a href="#">foo</a></li> 
      <li><a href="#">bar</a></li> 
     </ul> 
    </nav> 
</div> 

EXAMPLE

Answer 2

Мы должны обернуть содержание после навигации в DIV и установить положение: относительный и верхнее значение, превышающее высоту панели навигации.

HTML CODE: 
<nav> 
    <ul> 
    <li><a href="#">foo</a></li> 
    <li><a href="#">bar</a></li> 
    </ul> 
</nav> 

<div class="content"> 
    <section>foo</section> 
    <p>bar</p> 
    <h2>fubar</h2> 
    <div>blah blah blah </div> 
</div> 

CSS CODE: 
nav{ 
position:fixed; 
top:0; 
width:100%; 
border:1px solid black; 
} 

nav ul li{ 
display:inline; 
} 

nav ul li a{ 
text-decoration:none; 
color:black; 
font-size:20px; 
-webkit-transition:all .5s; 
padding:5px; 
} 

nav ul li a:hover{ 
background:black; 
color:white; 
} 
.content{ 
position:relative; 
top:60px; 
}