Pasek nawigacji ustalony na górze strony HTML (CSS / HTML)

Question

Aug 27, 2013, 03:08 PM

Pasek nawigacji ustalony na górze strony HTML (CSS / HTML)

Próbuję nauczyć się trochę CSS3 i HTML5, ale jestem trochę zmieszany z czymś. Na razie chcę utworzyć stronę ze stałym paskiem nawigacyjnym na górze strony, która przewija stronę.

Właściwie pasek nawigacyjny jest ustalony na górze i przewija stronę, ale zawartość zaczyna się na górze strony, innymi słowy, zawartość zaczyna się za panelem nawigacyjnym, nie chcę tego.

Zobacz pożądany projekt poniżej:

Obecny wzór:

Oto mój 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;
}

A mój HTML:

<!DOCTYPE HTML>
<html>
<head>
    <title> Test </title>
    <meta name="description" content="página de teste.">
    <link rel="stylesheet" type="text/css" href="stylesheet/style.css"/>
</head>
<body>

        <header class="topbar">
            test
        </header>

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

</body>

Więc co mogę zrobić, aby rozwiązać mój problem? Proszę, spróbuj odpowiedzieć za pomocą CSS, naprawdę nie chcę się teraz uczyć JavaScript / jQuery.

Dzięki!