Startseite Skripte für das Wintersemester 2018/19 Webdesign Positionieren, Media Queries, CSS-Variablen Position: Fixed


Position: Fixed

Fixiertes Positionieren wird sehr häufig verwendet, um z.B. das Navigationsmenü am oberen Rand des Browserfenster zu fixieren.

Online-Demo

Demo – scrollt mal in der Demo!

HTML

<nav>
    <ul>
        <li><a href="#top">Startseite</a></li>
        <li><a href="#top">Portfolio</a></li>
        <li><a href="#top">Aktuelles</a></li>
        <li><a href="#top">Über uns</a></li>
        <li><a href="#top">Kontakt</a></li>
    </ul>
</nav>

CSS

nav {
    background: #000;
    width: 100%;

    /* nächste Zeile fixiert nav am oberen Rand des Bildschirms*/
    position: fixed;

    left:0;
    top: 0;
}

ul {
    width: 80%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

a, a:visited {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: .5em 1.5em .5em 0;
}

CodePen

See the Pen position_fixed by Matthias Edler-Golla (@megolla) on CodePen.