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 {
overflow: auto;
width: 80%;
margin: 0 auto;
}
li {
float:left;
}
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.