я пытаюсь изучить CSS3 и HTML5, но яЯ немного запутался с чем-то. Сейчас я хочу создать страницу с фиксированной панелью навигации вверху страницы, которая прокручивается вместе со страницей.

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

Увидеть хотел дизайн ниже: 

Текущий дизайн: 

Вот мой CSS:

body{
    left: 0;
    top: 0;
    margin: 0px;
    padding: 0px;
}

header.topbar{
    background-color: #f8f6f6;
    position: fixed;
    width: 100%;
    height: 100px;
    opacity: 0.7;
    z-index: 1;
    top: 0;
    left: 0;
}

#content{
    z-index: 0;
    position: absolute;
}

И мой HTML:

     Test 
    
    



        
            test
        

        <p>another test</p><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br>
        <p>again</p>

Итак, что я могу сделать, чтобы решить мою проблему? Пожалуйста, попробуйте ответить с помощью CSS, я действительно неЯ не хочу изучать JavaScript / JQuery в данный момент.

Спасибо!