INFOPORTAL BERLIN

Immer wiederkehrende Fragen einfach erklärt

position

Position absolute oder Position relative

Was haben diese beiden Befehle für Auswirkungen auf unserer Darstellung im Browser? Unsere anzuzeigenden Elemente können unter der Verwendung von position:xx vom normalen Textfluss losgelöst werden und an jeder anderen Stelle des sichtbaren Bereiches positioniert werden.position:absolute und position:relative

position:absolute

Mit der Eigenschaft absolute kann man das Element vom vorhandenen Textfluss lösen und an jeder anderen Stelleanordnen. Hierfür können wir eine Größenangabe mit width und height vornehmen oder mit den Befehlen left, right. top oder bottom anordnen. Auch grundlegende Größenangaben mit margin oder padding sind problemlos möglich.

position:relative

Der Gegenspieler hierzu ist die Eigenschaft relative. Hierbei wird der absolute Bezugspunkt des Kind Elements herangezogen. Hierbei richtet sich dieses Element quasi an sich selbst aus. Es wird ebenfalls mit den Parametern top, bottom, right und left ausgerichtet.

 

Im Gegensatz zur relativen nimmt die absolute Positionierung das Element komplett aus dem Fluss heraus. Das Element wird – bildlich gesprochen – hochgezogen, und alle anderen Elemente auf der Seite verhalten sich so, als ob es gar nicht da wäre.

Absolut positionierte Elemente werden aus dem Fluss herausgehoben und liegen über den anderen Elementen. 

Die genaue Position wird wieder durch toprightbottom oder left angegeben, aber die Werte für diese vier Eigenschaften orientieren sich nicht mehr an der ursprünglichen Position der Box im Fluss: 

  1. Die absolute Positionierung eines Elements bezieht sich auf das nächste umgebende Element (containing block), das mit relativeabsolute oder fixed positioniert ist. 
  2. Falls kein positioniertes umgebendes Element vorhanden ist (was in der Praxis häufig der Fall ist), erfolgt die Positionierung relativ zum obersten Element des Dokumentbaums, und das ist nicht body, sondern html

Diese beiden Aussagen kann man so zusammenfassen: 

  • Absolute Positionierung ist relativ zu irgendeinem Bezugspunkt.
  • Es gibt zwei verschiedene mögliche Bezugspunkte: 
    • ein umgebendes positioniertes Element  
    • das Stammelement html

Setzt man die Eigenschaften toprightbottom, and left eines relativ positionierten Elementes, passt sich dessen relativ zu seiner normalen Ausgabe an.

absolute ist der kniffeligste Wert und verhält sich wie fixed, jedoch relativ zum nächsten positionierten Ancestor statt relativ zum Viewport. Hat ein absolut positioniertes Element keinen positionierten Ancestor, benutzt es den document body und bewegt sich auch mit der gescrollten Seite. Zur Erinnerung: Ein „positioniertes“ Element ist eines das als Position irgendeinen Wert außer static hat.

 

Weitergehende Informationen sind unter diesem Link zu erreichen: https://www.fragmich.berlin/prog/css/ im Video „CSS-div-float-pos“. Ferner auf der externen Seite wiki.selfhtml.org/wiki/CSS/Eigenschaften/

 

position :relative und :absolute

 

Updated: 19. Mai 2018 — 19:29
INFOPORTAL BERLIN © 2017 >> Impressum << - >> Datenschutz << - >> Disclaimer << Frontier Theme