CSS, HTML und Javascript mit {stil}

display:absolute in relativ positionierten Elementen

CSS Positionieren: Relative in Absolute

HTML-Elemente mit CSS position: absolute sitzen normalerweise relativ zum HTML-Dokument oder Browserfenster.

Aber wenn das HTML-Element mit CSS position: absolute in einem Block mit position: relative sitzt, wird der relativ posititionierte Block zum Koordinatensystem des absolut positionierten HTML-Elements.

HTML-Blöcke mit CSS position: relative verhalten sich nicht anders als Blöcke ohne Positionierung. Sie fließen mit dem Inhalt und können also auch mit CSS float kombiniert werden. Aber meistens verwenden wir position:relative zusammen mit position:absolute – in Slideshows, in Menüs, wenn Text über Bildern liegt, in Animationen und wenn Bilder mit clip beschnitten werden.

div.block { position: relative; float: left; }
header

Ich bin GRÜN und relativ positioniert

position:relative;float:right

Relative Positionierung kann also mit float kombiniert werden.
Aber in GRÜN liegt auch GOLD, ein Block mit

position:absolute;right:0;top:0

Weil GRÜN relativ positioniert ist, bildet GRÜN das Koordinatensystem von GOLD. Wenn GRÜN verschoben wird, wandert GOLD mit.

Ich bin BLAU, ein ganz normaler Block ohne CSS position. Weil GRÜN mit CSS float notiert ist, bricht der Text in BLAU um.

Ich bin GRAU und ohne CSS position. Weil für GRAU CSS clear: both notiert ist, liegt GRAU immer unter allen Blöcken mit float: left oder float: right.

Der Block GOLD sitzt absolut positioniert im relativ positionierten Block GRÜN. Wenn GRÜN nach unten rutscht (z.B. weil ein Header über dem Inhalt größer oder die Schriftgröße geändert wird), rutscht der absolut positionierte Block mit, aber bleibt immer auf derselben Position innerhalb von GRÜN.

Sitzt in einem relativ positionierten Block ein absolut positionierter Block, wird die Position des absolut positionierten Blocks nicht mehr relativ zum HTML-Dokument, sondern relativ zum Block mit position: relative berechnet.

<div id="GREEN" style="background: green">
	<div style="background: gold; position: absolute">
	…
	</div>
</div>
position:relative

CSS position:absolute im Layout

Im Layout bei der Positionierung der Blöcke für Header, Inhalt und Navigation wird position: absolute eher selten verwendet, denn was absolut positioniert ist, bleibt fest an seiner Position im HTML-Dokument verankert. Bei Änderungen der Schriftgröße oder wenn die Slideshow im Header der Webseite größer wird, muss also immer nachgearbeitet werden. Das ist aufwändig und fehlerträchtig.

Für das Layout eignet sich eine statische Positionierung (also keine Positionierung) kombiniert mit float: left oder float: right besser, da sich aus dieser Kombination ein flexibleres Layout entwickeln läßt.

Aber die Kombination aus relativer und absoluter Positionierung bringt der Navigation ein paar Kunststücke bei und ist die Basis für Slideshows.

position: absolute zentriert

Frickelig: Ein Element, das mit position: absolute in einem Element mit position: relative sitzt, zentriert zu setzen.

Nehmen wir eine Slideshow, in der Bilder mittig vor einem Hintergrund sitzen:

<div id="bg">
    <div id="inner">
        <img src="slide.png"  />
    </div>
</div>

Für ein Element, das mit position:absolute zentriert werden soll, wird left bzw. top mit 50% notiert. Dann muss das Element mit negativem margin-left bzw. margin-top um die Hälfte seiner Breite / Höhe nach links bzw. oben geschoben werden.

Soll die Konstruktion am Ende auch noch responsive werden, bekommt jeder Breakpoint seine eigenen Berechnungen.

#bg {
    position:relative; width:300px; height:133px;
    background:url(slide-background.png); 
    background-size:100% }

#inner { 
    position:absolute;
    width:200px; height:76px;
    left:50%; top:50%; 
    margin-left:-100px; margin-top:-38px }

#inner img { width:100%; height:auto }

@media only screen and (min-width:480px) {
    #bg { width:450px; height:201px }
    #inner {
         width:300px; height:114px;
         margin-left:-150px; margin-top:-57px }
}

@media only screen and (min-width:720px) {
    #bg { width: 600px; height: 266px }
    #inner {
        width:400px; height:152px;
        margin-left:-200px; margin-top:-76px }
}

Suckerfish Dropdowns

Aus dem Jahr 2003 stammt die Idee, die Kombination aus relativer und absoluter Positionierung für eine barrierefreie Navigation mit einem Pulldown-Menü zu nutzen: Das Mutterschiff der Pulldown-Menüs ist das Suckerfish-Dropdown.

Praktisch ist diese Kombination z.B. für den Seitenkopf mit der Hauptnavigation. Die obere Ebene der Navigation wird relativ positioniert, die erste und zweite Ebene eines Pull-Down Menüs können dann absolut in Relation zu den Einträgen der oberen Ebene platziert werden. Das ist ein echter Klassiker:

  • Kuchen
    • festliche Torten
    • Schokoladensahne
    • Nusskuchen Emma
    • Eissplitter Natur
  • Gebäck
    • Sonntagsbrötchen
    • Nussplätzchen
    • Feinster Lebkuchen
    • Mandelbiscuit
    • Caramel Muffin
  • Brot
    • Tiroler Steinofen
    • Paderborner
    • Feiertagsstuten
@media (min-width: 620px) {
   .ul-menu { height: 2.2em; }
   .ul-menu li { display: inline-block; width: 32%; float: left; position: relative; }
   .ul-menu li ul { position: absolute; height: 0px; overflow: hidden; transition: height 2s; }
   .ul-menu li:hover ul {
      height: 150px;
      overflow: visible
   }
}

Das ist jetzt natürlich nur ein Fragment einer responsiven Suckerfish-Navigation – da fehlt noch jede Menge CSS und :hover ist keine gute Option für mobile Geräte.

Weitere Anwendungen für absolute Positionierung in relativ positionierten Blöcken sind Slideshows, Text über Bildern und CSS clip – das Beschneiden von Bildern..