Navigationsleiste oben auf der HTML-Seite behoben (CSS / HTML)

Question

Aug 27, 2013, 03:08 PM

Navigationsleiste oben auf der HTML-Seite behoben (CSS / HTML)

Ich versuche, etwas von CSS3 und HTML5 zu lernen, aber ich bin ein wenig verwirrt mit etwas. Im Moment möchte ich eine Seite mit einer festen Navigationsleiste oben auf der Seite erstellen, die mit der Seite gescrollt wird.

Eigentlich ist die Navigationsleiste oben fixiert und scrollt mit der Seite, aber der Inhalt beginnt oben auf der Seite, mit anderen Worten, der Inhalt beginnt HINTER der Navigationsleiste, das möchte ich nicht.

Siehe gewünschtes Design unten:

Aktuelles Design:

Folgendes ist mein 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;
}

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

Was kann ich also tun, um mein Problem zu lösen? Bitte versuchen Sie, mit CSS zu antworten. Ich möchte im Moment wirklich kein JavaScript / jQuery lernen.

Vielen Dank!