Absolut in Bezug auf das Elternelement positioniern 27. September 2006 um 19:59 Uhr / Webdesign

Eingestellt am 27. September 2006 um 19:59 Uhr » Webdesign

Relativ oft werde ich bei einer Sache um Rat gebeten: Wie kann ich bei einer zentrierten Seite position: absolute; verwenden um Elemente zu positionieren?

Das ganze ist relativ einfach, wenn auch es scheinbar nicht all zu bekannt ist. Man gibt dem Elternelement position: relative;, dadurch wird das absolut positionierte Element innerhalb dessen relativ zu seinem Elternelement, anstatt zum Fenster positioniert.

HTML

<div id="container">
 <ul id="menu">
  <li><a href="#">Menüpunkt</a></li>
  <li><a href="#">Menüpunkt 2</a></li>
 </ul>
</div>

CSS

#container {
 position: relative;
 margin: 0 auto;
 width: 750px;
}

#menu {
 position: absolute;
 top: 30px;
 left: 140px;
}

Somit kann man innerhalb der zentrierten Seite zum Beispiel sein Menü irgendwo absolut zum Container positionieren und es bewegt sich je nach Breite immer an die richtige Stelle.

Anmerken sollte ich auch noch, dass das nicht nur mit position: relative; funktioniert, sondern mit allem was nicht position: static; ist.

Kommentare

Die Kommentare sind für diesen Eintrag geschlossen.