Design, Interaction, Code & Teaching

010 CSS-Position: relative, absolute und fixed – Positionieren, Raster & Layouts Part III

css-skizze-position-absolute-relative-fixed

In diesem dritten Teil positionieren wir HTML-Boxen komplett außerhalb des HTML-Flows. Andere HTML-Elemente haben keinen Einfluss mehr auf die Platzierung der Boxen auf dem Screen. Die Boxen werden einfach absolut zu einem bestimmten Nullpunkt positioniert und bleiben dort stehen.

Diese absolute Positionierung eignet sich hervorragend, um Gestaltungselemente im Gesamtlayout zu positionieren. So können Boxen übereinandergestappelt, an einer bestimmten Position fixiert oder auch außerhalb eines Rahmens bewegt werden. In den Beispielen werden diese Strategien für die Positionierung vorgestellt. Für das Gesamtlayout solltet ihr die absolute Positionierung sehr vorsichtig anwenden, weil Webdesign anderen Regeln als Printdesign folgt!

Position: relative / absolute / fixed

  1. Unterschied zwischen Webdesign und Printdesign
  2. Wann können absolute Größenangaben problematisch werden?
  3. Position: relative, position: absolute und position: fixed
  4. Beispiel: Logo, Navigation, Stopper
  5. Beispiel: Artikel mit Datum und Bild
  6. Fazit

Demo & Code
Demo Position: relative / absolute / fixed
Download code

Unterschied zwischen Webdesign und Printdesign

Die absolute Positionierung kennt ihr von Layout-Programmen wie InDesign. Die Objekte werden mit der Maus an die gewünschte Position, dem Entwurf entsprechend, geschoben. Die Frage ist, warum verwenden wir die absolute Positionierung nicht auch im Webdesign, um das gesamte Layout aufzubauen – das scheint doch auf dem ersten Blick einfacher?

Dynamische Parameter versus statischem Seitenaufbau

Die Antwort ist einfach: Mit Layout-Programmen wie InDesign arbeiten wir immer für absolute Seitengrößen in der Höhe wie auch in der Breite. Jedoch in Online-Medien kennen wir nur bestimmte Parameter der Ausgabe: Ein Screen kann 480 Pixel breit sein, aber auch 2568 Pixel – die Höhe könnte die Höhe des Bildschirms sein, eine Webseite kann aber auch vom User weiter nach unten gescrollt werden. Die Höhe ist oft unbestimmt und vom Content abhängig.

Für ein Layout werden also die Parameter bestimmt, mit welchen der Content in das Layout einfließt. Dabei kann der Inhalt von der Menge variieren und wird meistens von einem Redakteur eingegeben und auch im Nachhinein verändert. Auch der Besucher kann möglicherweise Parameter einstellen wie die Größe und Art der Schriften. Während also im Printdesign eine Seite statisch und nachdem Sie gedruckt wurde, auch unveränderbar ist, sind Webseiten dynamisch und die Parameter nur teilweise bestimmbar.

Wann können absolute Größenangaben problematisch werden?

Immer wenn eine HTML-Box von der Größe einer anderen abhängig ist und sich die Größen oder der Content aufgrund der genannten Parameter ändern könnte, zum Beispiel:

  • Angabe der height-Eigenschaft: Wenn der Content länger als die Box ist, läuft der Content über die Box hinaus, ohne dass sich die anschließenden Elemente nach unten verdrängen, oder der Content wird einfach abgeschnitten (overflow: hidden).
  • Angabe der width-Eigenschaft: Die width-Eigenschaft beträgt grundsätzlich 100%. Sobald ihr ein Responsive-Design für verschieden Screengrößen andenkt, müsstet ihr die width-Eigenschaft für jede Box neu definieren.
  • Boxen mit absolute-Eigenschaft: Diese Boxen werden frei positioniert. Es gibt keine Beziehung zu anderen Boxen, diese werden einfach überlappt, wenn der Platz nicht frei ist.

Grundsätzlich gilt also: Layout-Elemente sollten mit bedacht absolute positioniert werden. Ihr sollte euch immer fragen: Kann diese Box auch im HTML-Flow laufen, ohne dass sich etwas ändern würde, muss ich diese width- und height-Eigenschaft absolut bestimmen?

Nun genug der Mahnung zu Vorsicht – jetzt schauen wir uns an wie und vor allem was ihr mit der absoluten Positionierung erreichen könnt.

Position: relative, position: absolute und position: fixed

sind die drei CSS-Eigenschaften, um Elemente komplett außerhalb des Flows zu positionieren. Mit den CSS-Eigenschaften top, right, bottom, left können die Werte für die Position in Pixel oder anderen Einheiten gesetzt werden. Es reichen für gewöhnlich zwei Werte zum Beispiel bottom und right – es sind auch negative Werte möglich! Der vierte Wert für die CSS-Eigenschaft ist position: static, was dem normalen HTML-Flow entspricht.

1. Position: relative – Löcher im Layout

Der Position-Wert relative platziert die Box relativ zu ihrer ursprünglichen Position. Da wo sie eigentlich stehen sollte, entsteht eine Lücke im Layout. Allerdings braucht ihr position: relative für diese Art der Anwendung wirklich sehr selten. Der eigentlich Wert von relative positionierten Boxen liegt im Zusammenhang mit Boxen, die position: absolute definiert sind. Sie markieren den Nullpunkt für absolut positionierte Boxen und laufen dabei im HTML-Flow mit. Verwirrend? Das klären die Beispiele und die sind sehr nützlich!

2. Position: absolute mit position: relative als Nullpunkt

Absolute positioniert Boxen können vollkommen frei ausgerichtet werden. Vorsicht: Das kann schnell zu den bereits genannten ungewollten Überlappungen im Layout führen.

Der Nullpunkt für die Positionierung ist der Screen, außer wenn das Elternelement position: relative gesetzt wurde. Dann richtet sich das Kindelement an dieser Box aus. So Ihr könnt eine verschachtelte Box an jeder Seite des Elternelementes ausrichten. Damit lassen sich sehr interessante Layout-Details realisieren. Ich gehe darauf in den Beispielen ein.

3. Position: fixed – fest positioniert auch beim Scrollen

Fixed positionierte HTML-Elemente kleben an ihren Position auf dem Screen. Wenn der Besucher die Seite scrollt, scrollen diese Elemente nicht mit. Sie bleiben immer an der gleichen Stelle auf dem Screen stehen und sind jederzeit sichtbar. So könnt ihr prima ein Stopper platzieren oder auch ein kleines Social-Media-Menü.

Beispiel: Logo, Navigation, Stopper

Fangen wir mit einem ganz einfachen Beispiel an für position: absolute und position: fixed. Das Gesamtlayout der Seite ist aufgebaut wie im ersten Artikel mit den Bereichen header, main und footer. Die HTML-Elemente dieser Hauptboxen werden jetzt durch absolut positionierte Elemente ersetzt: ein Logo, ein Navigationsmenü und ein Stopper-Button.

Logo

Das Logo soll pixelgenau am linken oberen Rand der DIV.header Box ausgerichtet werden.

HTML: Die Box H1 braucht nicht verändert zu werden.

1
2
3
4
    <!-- header -->
    <div class="header bg-main">   
        <h1 class="logo">LOGO</h1>
    </div>

CSS: DIV.header wird position: relative gesetzt. Damit wird diese Box der Nullpunkt für die Ausrichtung des Logos. Das Logo bekommt die CSS-Eigenschaft position: absolute und kann dann mit top: 30px und left: 30px am Rand des Header-Bereiches ausgerichtet werden.

1
2
3
4
5
6
7
8
9
   .header {
        position: relative;
        /*more styles*/  
    }
   .header .logo {
        position: absolute;
        top: 30px;
        left: 30px;
    }

Navigation

Die Navigation funktioniert nach dem gleichen Muster – nur oben rechts am DIV.header ausgerichtet statt oben links wie das Logo.

HTML: Eine Navigation wird grundsätzlich mit einer HTML-Liste UL realisiert. Die einzelnen Menüpunkte sind die Listeneinträge LI.

1
2
3
4
5
6
7
    <h1 class="logo">LOGO</h1>
   
    <ul class="nav">
        <li><a href="#">Projekte</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Imprint</a></li>
    </ul>

CSS: Die Liste UL.nav bekommt auch die CSS-Eigenschaft position: absolute. Das Elternelement DIV.header ist bereits mit position: relative definiert – UL.nav kann also einfach mit top: 30px und right: 30px am rechten oberen Rand ausgerichtet werden. Der Rest des CSS-Code ist nur für das Aussehen der Liste verantwortlich: Mit display: inline laufen die Menüpunkte nebeneiander, list-style: none lässt den Spiegelpunkt verschwinden und etwas margin-right schafft Platz zwischen den Menüpunkten.

1
2
3
4
5
6
7
8
9
    .header .nav {
        position: absolute;
        top: 30px; right: 30px;
    }
    .header .nav li{
        display: inline;   
        list-style: none;
        margin-right: 10px;
    }

Stopper-Button

Der Stopper-Button soll immer an der gleichen Stelle rechts am Bildschirmrand sitzen, auch wenn der User den Content scrollen kann. Dieser Button wird position: fixed definiert.

HTML: Die Box DIV.stopper fügen wir ganz unten im HTML-Tree ein. Die Position ist aber nicht wichtig, da die Box am Screenrand ausgerichtet wird. Das Menü selber ist wieder eine einfache HTML-Liste.

1
2
    <!-- stopper -->
    <div id="stopper">READ THIS</div>

CSS: Dann muss nur noch die Box DIV.stopper position: fixed und mit top: 150px und right:150px am Viewport ausgerichtet werden. Der sichtbare Bereich des Monitors wird auch Viewport genannt.

Der weiterr CSS-Code bestimmt das Aussehen der Liste: Eine feste Größe, um den background: yellow zu setzen, line-height:150px ist ein Trick, um einzeiligen Text vertikal zu zentrieren – die line-height ist gleich groß wie die height der Box, und schließlich noch runde Ecken, um aus dem Quadrad ein Kreis zu machen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    #stopper {
        position: fixed;
        width: 150px; height: 150px;
        top: 150px; right: 100px;

        /* box color and font styles */
        background: yellow;  
        color: black;
        line-height: 150px;   /* trick center one line vertically */
        text-align: center;
   
        /* round corners*/
       -webkit-border-radius:75px;
       -moz-border-radius: 75px;
       -o-border-radius:75px;
       border-radius: 75px;
    }

Dieses sind erprobte Muster für die Positionierung von Layoutdetails wie Navigation, Logos, usw. Im Footer könnte auf die gleiche Art ein Copyright oder eine Subnavigation implementiert werden. Kommen wir jetzt zu den etwas komplexeren Strategien der relativ absoluten Positionierung.

Beispiel: Artikel mit Datum und Bild

Für das Beispiel fügen wir im Main-Teil des Layouts einige Artikel mit Überschrift und Blindtext ein. Jeder Artikel soll ein Datum bekommen, das über der Überschrift steht, und ein Bild, das bei MouseOver die Bildunterschrift anzeigt.

HTML: Ein Artikel ist einfach eine Box mit Überschrift und Paragraph. Drei Artikel sollten für unser Beispiel reichen.

1
2
3
4
5
6
7
8
9
    <!-- main -->      
    <div class="main bg-main">
        <div class="article">
            <h2>Mein erster Artikel</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
        </div>
    </div>

     <!-- more article -->

Datum – kleine Box an großer Box ausrichten

Das Datum soll über der Überschrift stehen. Die Überschrift bleibt im Textflow, nur das Datum wird absolut positioniert und an dem HTML-Element der Überschrift ausgerichtet.

HTML: Die Überschriften werden um ein Datum mit SPAN-Tag ergänzt, verschachtelt in den Überschriften.

1
    <h2>Mein erster Artikel<span class="date">02.01.2013</span></h2>

CSS: H2 wird position: relative definiert und das Datum SPAN.date position: absolute. Damit ist die Box H2 der Rahmen für die Positionierung des Datums. Mit left: 0px und top: -40px wird das Datum über die Überschrift bewegt.

1
2
3
4
5
6
7
8
9
10
11
12
13
    .article h2 {
        margin-top: 100px;
        position: relative;

        font-size:18px;
    }
    .article h2 .date {
        position: absolute;
        top: -25px; left: 0;
   
        font-size: 14px;
        font-weight: normal;
    }

Jetzt taucht ein Problem auf: Für das Datum ist im Layout noch kein Platz vorhanden, es überlappt mit dem vorherigen Artikel. Hier hilft das Boxmodel: Mit margin-top kann so viel oder mehr Randabstand für H2 festgelegt werden, wie das Datum SPAN.img mit top nach oben geschoben wurde. Dann passt es prima.

1
2
3
4
5
6
    .article h2 {
        margin-top: 100px;
        position: relative;

        font-size: 18px;
    }

Nach dem gleichen Muster können wir das Datum beliebig links neben den Artikel, am rechten Rand oder unter den Artikel positionieren. Oder wir setzen für einen wichtigen Artikel einen auffälligen Stopper. Der würde dann an die Box DIV.article aligniert werden, DIV.article bekommt position: relative der Stopper position: absolute, usw.

Das Muster, um diese Effekte zu erzielen, lautet: Kleine Boxen absolut an ihren relativ positionieren Elternelementen ausrichten.

Bild mit Bildunterschrift – Hover Effekt

Als weiteres Layoutelement erhält der Artikeltext ein Bild mit Bildunterschrift, die bei MouseOver über dem Bild angezeigt werden soll. Dieser Effekt lässt sich leicht mit absoluter Positionierung und dem Pseudo-Selector Hover erreichen. Hover bezeichnet den Zustand der Maus direkt über einem HTML-Element.

Fügen wir erst Mal den Html-Code beim Paragraph des Artikels für das Bild und die Bildunterschrift ein.

1
2
3
4
5
6
7
    <p>
        <div class="img-article">
        <img src="img/bild2566.png" width="150" height="150" />
        <div class="figure">Lorem ipsum dolor sit amet</div>
        </div>
        Lorem ipsum dolor ....
    </p>

Jetzt das CSS: Das DIV.img-article wird mit der float-Eigenschaft links aligniert. Die Größe der Box wird gleich der Größe des Bildes gesetzt, damit die Bildunterschrift nicht über das Bild hinausläuft sondern umbricht. Der Artikeltext umfliesst das Bild und mit der margin-Eigenschaft schafft ihr etwas Weissraum am Rand für das Bild.
Bei float sollte ihr immer gleich daran denken: Muss ich etwas clearen? Ich setze zur Sicherheit ein clear: both für die Box DIV.article. Sonst würde das Bild in den nächsten Artikel floaten, wenn der Artikeltext zu kurz ist.

1
2
3
4
5
6
7
8
9
    .article {
        clear: both;
    }
    .article .img-article{
        float: left;
        width: 150px;
        margin-right: 20px;
        margin-bottom: 20px;
    }

Ohne weitere Styles sitzt die Bildunterschrift direkt unter dem Bild. Um die Bildunterschrift über das Bild zu setzen, wird DIV.img-article position: relative definiert und die Bildunterschrift .img-article .figure position: absolute und mit bottom und left wird die Bildunterschrift am unteren Rand ausgerichtet. Damit der Text besser lesbar, ist der background: black gesetzt und noch ein paar Styles für das Aussehen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    .article .img-article {
        position: relative;
        float: left;
        /* more styles */        
    }
    .article .img-article .figure {
        position: absolute;
        bottom: 10px; left: 5px;
   
        padding: 4px;
        margin: 4px;
        background: black;
        font-size: 14px;
        font-weight: normal;
    }

Die Bildunterschrift soll aber nur sichtbar sein, wenn sich die Mouse über dem Bild befindet. Der Trick ist, die Bildunterschrift mit der CSS-Eigenschaft visibility: hidden unsichtbar zu machen und erst bei MouseOver einzublenden – der Zustand ist definiert mit dem Pseudo-Selector Hover und der CSS-Eigenschaft visibility: visible.

1
2
3
4
5
6
7
8
9
10
    .article .img-article .figure {
        visibility: hidden;
        position: absolute;
        /* more styles */
    }
   
   /* mouse-over-effect: pseudy-selector hover bei .img-article */
   .article .img-article:hover .figure{
        visibility: visible;
    }

Mit dem Pseudo-Selector Hover könnt ihr sehr einfach interessante Effekte mit CSS3 erzielen, die für gewöhnlich mit Javascript realisiert werden. Das Stichwort heißt CSS3-Transition. Mit einer CSS3-Tranisition kann der Zustand zwischen Mouse über und außerhalb einer Box animiert werden. Ich werde CSS3-Animationen in einem weiteren Artikel vorstellen.

Fazit

Mit der absoluten Positionierung kennen wir alle CSS-Eigenschaften, um HTML-Elemente zielgerichtet auf dem Bildschirm anzuordnen:

  • Boxen einfach im normalen Textfluss positionieren.
  • Boxen mit CSS-Eigenschaft float links und rechts im Textfluss alignieren.
  • Boxen mit der CSS-Eigenschaft position komplett außerhalb des Textflusses frei positionieren.

Die Grundregel beim Aufbau eines Layouts lautet, möglichst wenig und mit Bedacht HTML-Elemente mit absoluten Werten zu definieren. Screenlayouts sind dynamisch und oft können wir nur bestimmte Parameter für die Darstellung des Contents bestimmen – bei Veränderungen könnten absolute Größenangaben das Layout zerhauen.

Mit absolut positionierten Elementen könnt ihr vor allem Details des Layouts bestimmen, insbesondere die Kombination position: relative und position: absolute eignet sich hervorragend um kleine Boxen an großen Boxen anzuordnen, die dann im Textfluss bleiben.

Demo & Code
Demo Position: relative / absolute / fixed
Download code

Im nächsten Teil 4 der Serie komme ich wieder zurück auf das große Ganze: Der Aufbau von Layouts mit einem Raster und die Verwendung von Raster-Systemen.

Artikel dieser Serie Positionieren, Raster Layouts mit CSS

Part I: CSS-Selectors und Styles
Part II: Box-Model und CSS-Float-Eigenschaft
Part III: CSS-Position: relative, absolute und fixed
Part IV: Raster und CSS-Raster-Systeme
Part V: alltägliche CSS-Probleme beim Positionieren von Elementen


Über den Autor


Prof. Pepe Jürgens konzipiert, gestaltet und programmiert seit 20 Jahren digitale Medien. Er gründete das interdisziplinäre Design-Studio Weltformat und ist Co-Founder von lernox mit dem Ziel, freie Lehr- und Lernmaterialien aus dem Internet zu kuratieren. Seit 2013 doziert Pepe Jürgens Interaction Design an der Hochschule der populären Künste in Berlin


Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>