Die position Eigenschaft bei CSS gibt es schon Ewigkeiten. Sie war sehr nützlich vor CSS 3 bzw. ließen sich viele Dinge nur mit der position Eigenschaft und ihren Werten realisieren.
Aber auch heute gehört dieses CSS-Attribut nicht zum alten Eisen und wird vielfach verwendet.
Wir betrachten heute die Kombination aus den Werten absolute und relative.
Kurz im Allgemeinen zu position und seinen möglichen Optionen:
| static: | Das ist die Standard Einstellung. Genau so, als würdet ihr position nicht verwenden. Das HTML-Element ist im normalen Dokumentenfluss. |
| relative: | Das HTML-Element wird relativ zu seiner normaler Position verschoben. Normale Position heißt hier, die Position die es mit static im normalen Dokumentenfluss gehabt hätte. |
| absolute: | Das HTML-Element wird relativ zur Position des nächst-gelegenen Eltern-Elements positioniert, dass auf position: relative gesetzt ist. Gibt es kein Eltern Element, wird es relativ zum Browser-Fenster verschoben. |
| fixed: | Das HTML-Element wird relativ zum Browser-Fenster positioniert und bleibt auch beim scrollen dort stehen. Man nennt das auch sticky. |
| Seit CSS 3 gibt es eine weitere Option: | |
| sticky: | Das HTML-Element läuft im normalen Dokumentenfluss mit, bis zu dem Zeitpunkt an dem es beim Scrollen den oberen Rand des Browserfensters erreicht. Ab dort bleibt es fest stehen. Verhält sich also wie fixed, nur das fixed von Anfang an das HTML-Element fixiert und man mit fixed ein Element fest positionieren kann wo man möchte. |
Positioniert werden Elemente bei position immer mit den zusätzlichen CSS-Eigenschaften left, right, top
und bottom. Ist das Element auf position: static gesetzt oder die position Option ist garnicht
definiert, werden diese Eigenschaften ignoriert.
Hier schon einmal der HTML-Code für unser Menü:
<ul class="mymenu">
<li>
<a href="">Leistungen</a>
<div class="submenu_container">
<ul class="submenu">
<li><a href="">Leistung 1</a></li>
<li><a href="">Leistung 1</a></li>
<li><a href="">Leistung 1</a></li>
</ul>
</div>
</li>
<!-- Weitere Menüpunkte -->
</ul>Und hier ein Bild wie das Menü nachher aussehen soll:
Es ist im Grunde sehr einfach, wir setzen die Listenelemente der obersten Menüebene auf position:
relative. Den Container submenu_container unterhalb dieser Listenelemente setzen wir position
absolute. Nun ist der Startpunkt für die Positionierung des Submenu-Containers die linke, obere Ecke
des Listenelements.
Hier der CSS-Code:
ul.mymenu > li
{
position: relative;
}
ul.mymenu > li > .submenu_container
{
background: white;
border-bottom: 1px solid #00a2d1;
border-top: 5px solid #00a2d1;
box-sizing: border-box;
left: 0;
display: none;
padding: 20px;
position: absolute;
top: 100%;
width: 400px;
z-index: 9;
}
ul.mymenu > li:hover > .submenu_container
{
display: block;
}Die fettgedruckten Eigenschaften, sind hier die Relevanten. Der andere Code ist Basis Styling für
unser Menü.
So nun seid ihr dran! Viel Erfolg!