CSS/Tutorials/Ausrichtung/display und position

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Ausrichtung(Weitergeleitet von Elementfluss)
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
30min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
Grundkenntnisse in
• HTML
• CSS

CSS 2.2 bietet drei Schemata, mit denen sich Boxen (rechteckige Elemente) in einem Webdokument beeinflussen lassen:[1]

display[Bearbeiten]

Information: Elementfluss

Der normale Elementfluss beschreibt das Verhalten von Elementen (genauer: von Boxen), die nicht positioniert oder gefloatet wurden.
Ohne weitere Festlegung nehmen Block-Elemente wie div, h1-h6 und p die gesamte Breite des Viewports ein und werden untereinander dargestellt.
Wenn eine Überschrift oder ein Textabsatz zu viel Inhalt für die verfügbare Bildschirmbreite hat, brechen sie um und erzeugen eine neue Zeile.

Mit CSS, besonders den Eigenschaften display, float und position, lassen sich Boxen aus dem Elementfluss herausnehmen.

Die display-Eigenschaft legt die Art der Box fest. Die wichtigsten Werte sind:

  • none: Das Element wird nicht dargestellt, ist im DOM aber noch zu sehen.
  • block: Das Element wird als Box dargestellt, die sich über dem gesamten verfügbaren Platz des Elternelements erstreckt.
    • Beispiele sind Überschriften (h1-h6) oder ein Absatz (p).
    • Nachfolgende Elemente folgen unterhalb.
  • inline: Das Element ist nur so breit wie der Inhalt und wird innerhalb einer Zeile angeordnet, kann sich aber auch über mehrere Zeilen erstrecken.
    • Beispiele für inline-Elemente sind Verweise (a) und Bilder (img).
    • Nachfolgende Elemente folgen auf der gleichen Zeile.
  • inline-block: erzeugt eine Box, die Eigenschaften von Inline- und Block-Boxen kombiniert.


Empfehlung:

Im Allgemeinen ist es nicht notwendig, die display-Eigenschaft zu setzen.

Verlassen Sie sich auf die Standard-Darstellung der Browser.

inline-Blöcke[Bearbeiten]

Manchmal kann es notwendig sein, inline-Elemente größer als die ursprüngliche Zeilenhöhe darzustellen. Ein solcher Anwendungsbereich findet sich in Navigationen, wo die Klickflächen der Links größer und einheitlich formatiert werden sollen.

Navigation: Links innerhalb einer Liste ansehen …
<nav>
  <ul>
    <li><a href="#link_1.html">Wiki</a></li>
    <li><a href="#link_2.html">Blog</a></li>
    <li><a href="#link_3.html">Forum</a></li>
  </ul>
</nav>

Die Links sind inline-Elemente innerhalb der Blockelemente li. Eine Festlegung von Außen- oder Innenabständen wirkt sich in Schreibrichtung aus, nicht jedoch auf die Zeilenhöhe!

Navigation: display:inline und display:inline-block ansehen …
li {
  background: #dfac20;
  display: inline;
  padding: 0;	
  margin: 1em;	
}

a {
  display: inline-block;	
  border: 1px solid;
  background: #306f91;
  color: #e6f2f7;
  padding: .5em;	
  margin: .5em;		
}

Die Blockelemente li werden mit display:inline innerhalb einer Zeile angeordnet. (Falls die Zeilenbreite nicht ausreicht, bricht die Navigation um.)

Die Links a sind mit display: inline-block nun nach außen innerhalb einer Zeile angeordnet, nach innen aber Blockelemente. So können Sie ihnen eine feste Breite geben.

Beachten Sie, dass ein Außenabstand margin des a-Elements das darunterliegende li sichtbar macht. Wenn Sie die Linkflächen weiter auseinanderrücken wollen, müssen Sie Abstände bei den li-Elementen festlegen.

flex und grid[Bearbeiten]

In modernen Code-Beispielen findet man oft Werte wie display: flex oder grid.

Beispiel ansehen …
body { 
  display: grid; 
  grid-template-columns: repeat (3, 1fr);
}

Mit diesen Werten wird das Visual Formatting Model durch flexible und responsive Flexbox-, bzw. Grid Layout-Modelle ersetzt, die die Webseite browserseitig aufteilen.

Da sich die display-Eigenschaft nicht auf die Kindelemente vererbt, sind die Elemente innerhalb des Grid Layout wieder Block- und Inline-Elemente.

position[Bearbeiten]

Mit der CSS-Eigenschaft position lassen sich Boxen aus dem Elementfluss herausnehmen.

Die wichtigsten Werte sind:

  • static (Standardwert) Das Element verbleibt im Textfluss. top, bottom, left, right werden ignoriert.
  • relative Das Element kann mit top, bottom, left, right verschoben werden; es bleibt aber eine Lücke im Textfluss.
  • absolute: Das Element wird aus dem Elementfluss genommen und kann völlig unabhängig auf dem Bildschirm positioniert werden.

Hinweis

Dabei muss aber noch einmal betont werden: Die Browser stellen alle Elemente innerhalb des Elementflusses nacheinander so dar, dass alle Inhalte sichtbar sind.
Webseiten ohne Festlegung von display und position sind bereits responsiv und zugänglich!

Relative Positionierung[Bearbeiten]

Im Allgemeinen ist es nicht nötig, die position-Eigenschaft zu setzen.

Beispiel ansehen …
a { 
  position: relative; 
  top: -.9em; 
  left: -1.2em; 
}

Öffnen Sie dieses Beispiel im Frickl mit "Ausprobieren" und erhöhen Sie den top-Wert auf -3em. Wie Sie sehen, verdeckt der Link die Überschrift.

Falls Sie den Link wirklich nach oben schieben wollen, bietet sich hier wie oben display: inline-block und ein padding-bottom an.

Absolute Positionierung[Bearbeiten]

Mit position: absolute kann man Elemente losgelöst vom Elementfluss positionieren, an eine Stelle, die per left, right, top und bottom festgelegt wird. Bezugspunkt ist das nächste Vorfahren-Element, das mit position: relative positioniert ist. Eine Lücke bleibt dabei nicht bestehen. Größenangaben, wie width und height, oder Abstände, wie margin und padding, sind ebenfalls möglich.

Schon im Einstieg in CSS-Kurs gab es ein Beispiel, in dem Links durch Pseudoelemente ergänzt wurden. Diese Pseudoelemente sollen sich nie verschieben, sondern immer neben dem Bezugspunkt positioniert werden.

Pseudoelemente als Aufzählungszeichen ansehen …
a {
  padding: 0 1em;
  position: relative;
}

a::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 0;
  width: 0;
  height: 0;
  font-size: 0;
  border: 8px solid transparent;
  border-left-color: currentColor;

}

Das a-Element wird mit position: relative zum Bezugspunkt; das absolut positionierte Pseudoelemet an den linken Rand um 3px nach oben positioniert.

Es mag verwirren, das Höhe und Breite 0 betragen. Der 8px breite Rand ist transparent - nur dem linken Rand wird durch border-left-color: currentColor; mit dem Farbwert currentColor die aktuelle Textfarbe zugewiesen.


Auch ein Tooltip, eine Sprechblase mit Erläuterungen, soll an der jeweils passenden Stelle außerhalb des Elementflusses eingeblendet werden.

Tooltip ansehen …
.tooltip {
  position: relative;
}

.tooltip span[role=tooltip] {
  display: none;
}

.tooltip:hover span[role=tooltip] {
  display: block;  
  position: absolute; 
  bottom: 2em;
  left: -6em;
  width: 15em;
  z-index: 100;
}
Die im span enthaltene Erklärung erhält keine Klasse, sondern wird über ihren Attributwert [rel=tooltip] angesprochen. Normal wird sie nicht dargestellt (display:none).
Bei :hover wird der Wert auf display: block geändert. Dieses Blockelement wird mit position: absolute oberhalb des Begriffs über das schon Gelesene platziert.
Beachten Sie, dass Sie dem Elternelement ein position: relative geben müssen.

Feststehender Footer mit position:fixed[Bearbeiten]

Ein feststehender Footer ist ein Footer, der am unteren Bildrand feststeht und damit immer zu sehen ist, unabhängig davon, wie die Seite gescrollt wird.

Dieses Beispiel arbeitet mit position mit dem Wert fixed.

Als Grundstruktur verwenden wir unsere Webseite mit einem einfachen Footer aus dem HTML5-Tutorial in der letzten Version eines CSS/Tutorials/mehrspaltigen Layouts:

Seite mit feststehendem footer ansehen …
body {
  padding-bottom: 3em;
}

footer {
  position: fixed;
  padding: .6em;
  bottom: 0;
  left: 0;
  right: 0;
}

Mittels position: fixed wird das footer-Element als feststehendes Element definiert, mittels bottom: 0; wird es genau auf der Unterkante des Darstellungsbereiches, also ganz unten, positioniert.

Beachten Sie, dass Sie für den body-Bereich noch einen unteren Innen- oder Außenabstand definieren, da sonst die Fußzeile den unteren Bereich des Elements überdeckt!

Unschön an diesem Beispiel ist, dass der Kontakt-Link und das Copyright bei großen Viewports außerhalb des eigentlichen Satzspiegels ist. Dies wird im nächsten Beispiel gelöst.

Feststehende Kopf- und Fußzeile[Bearbeiten]

Wenn Sie nun vielleicht noch gerne eine feste Kopfzeile definieren möchten, damit die Seite sowohl nach oben als auch nach unten hin stetig „abgeschlossen“ ist, lässt sich das auf die gleiche Art und Weise realisieren wie der Footer. Um bei der obigen HTML-Struktur zu bleiben, muss man das header-Element lediglich aus dem body herausnehmen und davor setzen. Folgende CSS-Deklarationen werden ferner benötigt:

Seite mit header und footer ansehen …
body {
  padding: 7em 0 3em;
}

body,
.wrapper {
  margin: 10px auto;
  max-width: 60em;	
}

header {
  position: fixed;
  top: 0;
  left: 0; 
  right: 0;
}

footer {
  position: fixed;
  padding: 10px;
  bottom: 0;
  left: 0;
  right: 0;
}
  <header>
    <div class="wrapper">
      <img src="Logo.svg" alt="logo">
      <h1>Titel</h1>
    </div>
  </header>

Die Funktionsweise ist beinahe identisch mit dem vorhergegangen Beispiel – lediglich der Body bekommt einen der Höhe des Header angepassten Innenabstand.

Damit die Inhalte von Header und Footer zentriert werden, wird hier noch ein zusätzliches div mit der gleichen Breite und Zentrierung wie der Body eingefügt.

Empfehlung:

Anstelle der hier vorgestellten Positionierung mit position:fixed; können Sie den gleichen Effekt auch mit

erreichen.


Weblinks[Bearbeiten]

Quellen[Bearbeiten]

  1. W3C: Visual formatting model - 9.3 Positioning schemes (CSS2.2)