SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Welche CSS-Eigenschaften es gibt, um HTML-Elemente frei zu positionieren, den Textfluss zu kontrollieren und die Anzeige von Elementen zu kontrollieren.
Keywords: SELFHTML, CSS, Stylesheets, Cascading Stylesheets, HTML, CSS-Eigenschaften, Positionierung, absolute Positionierung, relative Positionierung, Breite, Höhe, Anzeige von Elementen, position, top, left, bottom, right, width, min-width, max-width, height, min-height, max-height, overflow, direction, float, clear, z-index, display, visibility, clip
Date: 2005-11-16T01:48:05+01:00

| # Positionierung und Anzeige von Elementen
| Allgemeines zur Positionierung und Anzeige von Elementen position (Positionsart) top (Startposition von oben) left (Startposition von links) bottom (Startposition von unten) right (Startposition von rechts) width (Breite) min-width (Mindestbreite) max-width (Maximalbreite) height (Höhe) min-height (Mindesthöhe) max-height (Maximalhöhe) overflow (Elementbereich mit übergroßem Inhalt) direction (Richtung) float (Textumfluss) clear (Fortsetzung bei Textumfluss) z-index (Schichtposition bei Überlappung) display (Anzeigeart bzw. Nichtanzeige ohne Platzhalter) visibility (Anzeige bzw. Nichtanzeige mit Platzhalter) clip (Anzeigebereich eingrenzen)

## Allgemeines zur Positionierung und Anzeige von Elementen

Ab der CSS-Version 2.0 gibt es verschiedene Eigenschaften, um Elemente einer WWW-Seite exakt im Anzeigefenster des WWW-Browsers zu positionieren und die Position von Elementen untereinander genau zu kontrollieren. Dazu gehören Angaben zum absoluten und relativen Positionieren von Elementen, Angaben zur Ausdehnung von Elementen, Angaben zum Umfließen von Elementen und Angaben zum Überlappen und Anzeigen von Elementen.

Absolutes und relatives Positionieren von Elementen bietet Ihnen die Möglichkeit, das Erscheinungsbild von Web-Seiten stärker medienorientiert zu gestalten. So können Sie für einzelne Bereiche festlegen, wo genau diese Bereiche beginnen sollen. Bereiche können sich überlappen usw. Im Wesentlichen decken diese Eigenschaften die Möglichkeiten der alten Netscape- Layer ab. Im Gegensatz zu den Layern sind sie jedoch ein offizieller Vorschlag des W3-Konsortiums. Netscape und der Microsoft Internet Explorer interpretieren diese Angaben seit ihren 4er-Versionen - allerdings noch mit einigen Einschränkungen bzw. Besonderheiten.

Das Positionieren von Elementen ist eine wichtige Voraussetzung für viele Anwendungsfälle von Dynamischem HTML. Mit Hilfe entsprechender Script-Unterstützung können Sie positionierte Elemente bewegen, ein-/ausblenden, anders überlappen usw.

## position (Positionsart)

Sie können für einen Bereich bestimmen, wie er positioniert werden soll.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>position</title>
    <style type="text/css">
    body { margin:0; padding:0; height:1500px; }
    div { border:1px solid #888; }

    #s1 { width:150px; height:35px; }
    #s2 { width:150px; height:35px; }
    #r3 { width:150px; height:35px; position:relative; top:5px; left:25px; background-color:#dfd; }
    #s4 { width:150px; height:35px; }
    #s5 { width:150px; height:35px; }
    #r6 { width:150px; height:35px; position:relative; top:-15px; left:10px; background-color:#fdd; }
    #s7 { width:150px; height:35px; }
    #s8 { width:150px; height:35px; }

    #a1 { position:absolute; top:35px; left:240px; width:150px; height:150px;
          z-index:1; background-color:#ddf; }
    #a2 { position:absolute; top:90px; left:230px; width:120px; height:70px;
          z-index:2; background-color:#ccf; }
    #a3 { position:absolute; top:220px; left:200px; width:250px; height:250px;
          z-index:3; background-color:#ffa; }
    #a4 { position:absolute; top:20px; left:20px; width:70px; height:70px;
          z-index:1; background-color:#ff5; }
    #a5 { position:absolute; top:20px; right:20px; width:70px; height:70px;
          z-index:2; background-color:#dd2; }
    #a6 { position:absolute; top:130px; left:-50px; width:190px; height:70px;
          z-index:-1; background-color:#fdd; }
    #a7 { position:absolute; top:530px; left:50px; bottom:50px; right:50px;
          background-color:#fdd; }

    #f1 { position:fixed; top:45px; left:430px; width:150px; height:150px; background-color:#afa; }
    </style>
    </head><body>

    <p>Um <code>position:fixed</code> zu demonstrieren, scrollen Sie an das Ende der Seite.</p>

    <div id="s1">s1 static</div>
    <div id="s2">s2 static</div>
    <div id="r3">r3 relative</div>
    <div id="s4">s4 static</div>
    <div id="s5">s5 static</div>
    <div id="r6">r6 relative</div>
    <div id="s7">s7 static</div>

    <div id="a1">a1 absolute</div>
    <div id="a2">a2 absolute</div>
    <div id="a3">a3 absolute
      <div id="a4">a4 absolute</div>
      <div id="a5">a5 absolute</div>
      <div id="a6">a6 absolute</div>
    </div>

    <div id="a7">a7 absolute</div>

    <div id="f1">f1 fixed</div>

    <div id="s8">s8 static</div>

    </body></html>

### Erläuterung:

Mit `position:` können Sie die Positionsart bestimmen. Folgende Angaben sind erlaubt:

`static` = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).
`relative` = relative Positionierung (Verschiebung), gemessen an der Normalposition oder Anfangsposition des Elements selbst.
`absolute` = absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Normaleinstellung `position:static` aufweist. Scrollt mit.
`fixed` = absolute Positionierung, gemessen am "Viewport", d.h. am Browserfenster. Bleibt beim Scrollen stehen.

Besonders das Verhalten der Angaben `absolute` und `relative` ist anfangs etwas verwirrend. Denn `absolute` verhält sich durchaus relativ, wie die inneren `div`-Elemente a4 bis a6 des Beispiels zeigen: relativ nämlich zum Rand des Elternelements (a3), vorausgesetzt dieses Element ist mit `absolute`, `fixed` oder `relative` positioniert. Falls kein von `static` abweichend positioniertes Vorfahrenelement existiert, bezieht sich die Positionierung auf das `body`-Element.

Die Angabe `relative` bezieht sich auf die Normalposition des Elements selbst und verschiebt es entsprechend (Elemente r3 und r6). Der ursprünglich eingenommene Raum bleibt hinsichtlich nachfolgender Elemente – wie die Elemente s4 und s7 demonstrieren – erhalten.

Mit `absolute` oder `fixed` positionierte Elemente werden aus dem normalen Elementfluss entfernt und haben damit keinen Einfluss auf nachfolgende Elemente. Im Beispiel folgt demnach s8 bei der Anzeige direkt auf s7, ohne sich an den im Quelltext dazwischen liegenden Elementen a1 bis a7 und f1 zu orientieren.

Die Angabe `position:` allein legt noch nicht fest, wo genau ein Element beginnen soll. Es bleibt standardmäßig erst einmal dort, wo es ohne Positionierung auch angezeigt würde. Die gewünschte abweichende Position müssen Sie zusätzlich angeben. Dies können Sie beispielsweise mit Angaben für top, left, bottom oder right tun.

Wenn Sie also beispielsweise `position:absolute; top:30px` angeben, dann legen Sie für das betreffende Element fest, dass es 30 Pixel unterhalb des Randes seines nächsten von `static` abweichend positionierten Vorfahrenelements beginnt.
Wenn Sie `position:relative; top:5px` notieren, dann legen Sie für das Element fest, dass sein oberer Rand 5 Pixel tiefer liegt, als es normalerweise der Fall wäre.

### Beachten Sie:

Die Angabe `fixed` wird vom Internet Explorer für Windows bis Version 6 gar nicht und von Version 7 nur im standardkonformen Modus unterstützt, Netscape unterstützt sie seit Version 6.1.
Der Internet Explorer 6 berücksichtigt ferner nur einen Eckpunkt, sodass es diesem Browser nicht möglich ist, einem Element bei Angabe mehrerer Eckpunkte unter Verzicht auf `width/height` eine zu berechnende Breite und/oder Höhe zuzuweisen, wie dies im Beispiel auf das Element a7 zutrifft. Der Internet Explorer 7 berechnet bei Angaben zu `top` und `bottom` die Höhe nicht.

## top (Startposition von oben)

Diese Angabe ist sinnvoll in Verbindung mit einer vom Wert `static` abweichenden Angabe zu position. Sie können bestimmen, wo ein absolut oder relativ positioniertes Element von oben beginnt.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>top</title>
    </head><body>

    <div style="position:absolute; top:180px">
    <img src="hund.gif" width="208" height="181" alt="Hund">
    </div>

    <div style="position:absolute; top:136px; width:208px; background-color:#FFFFE0;
    border:1px solid #804000; padding:10px">Dies ist ein absolut positionierter Text
    &uuml;ber einer absolut positionierten Grafik.</div>

    </body></html>

### Erläuterung:

Mit `top:` können Sie die Startposition von oben bestimmen. Erlaubt sind numerische Angaben und der Wert `auto` für eine automatische Positionierung.

## left (Startposition von links)

Diese Angabe ist sinnvoll in Verbindung mit einer vom Wert `static` abweichenden Angabe zu position. Sie können bestimmen, wo ein absolut oder relativ positioniertes Element von links beginnt.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>left</title>
    </head><body>

    <div style="position:absolute; top:100px; left:100px;">
    <img src="hund.gif" width="208" height="181" alt="Hund"></div>

    <div style="position:absolute; top:140px; left:350px; width:200px;
    background-color:#FFFFE0; border:1px solid #804000; padding:10px">
    Dies ist ein absolut positionierter Text neben einer absolut positionierten Grafik.</div>

    </body></html>

### Erläuterung:

Mit `left:` können Sie die Startposition von links bestimmen. Erlaubt ist eine numerische Angabe oder der Wert `auto` für eine automatische Positionierung.

## bottom (Startposition von unten)

Diese Angabe ist sinnvoll in Verbindung mit einer vom Wert `static` abweichenden Angabe zu position. Sie können bestimmen, wo ein absolut oder relativ positioniertes Element von unten beginnt.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>bottom</title>
    </head><body>

    <div style="position:absolute; bottom:0px; left:100px;">Dies ist ein untenbündiger Hund:<br>
    <img src="hund.gif" width="208" height="181" alt="Hund"></div>

    </body></html>

### Erläuterung:

Mit `bottom:` können Sie die Startposition von unten bestimmen. Erlaubt ist eine numerische Angabe oder der Wert `auto` für eine automatische Positionierung.

### Beachten Sie:

Die Browser der 4er-Generation interpretieren diese Eigenschaft noch nicht, Opera bis Version 6 benötigt zusätzlich die Angabe von height.

## right (Startposition von rechts)

Diese Angabe ist sinnvoll in Verbindung mit einer vom Wert `static` abweichenden Angabe zu position. Sie können bestimmen, wo ein absolut oder relativ positioniertes Element von rechts beginnt.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>right</title>
    </head><body>

    <div style="position:absolute; top:100px; right:0px;">Rechtsb&uuml;ndiger Hund:<br>
    <img src="hund.gif" width="208" height="181" alt="Hund"></div>

    </body></html>

### Erläuterung:

Mit `right:` können Sie die Startposition von rechts bestimmen. Erlaubt ist eine numerische Angabe oder der Wert `auto` für eine automatische Positionierung.

### Beachten Sie:

Die Browser der 4er-Generation interpretieren diese Eigenschaft noch nicht, Opera bis Version 6 benötigt zusätzlich die Angabe von width.

## width (Breite)

Sie können bestimmen, wie breit ein Element oder Bereich sein soll. Um zu bestimmen, was mit dem Inhalt passieren soll, wenn er mehr Breite einnimmt als die hier angegebene Breite, können Sie zusätzlich die Eigenschaft overflow verwenden.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>width</title>
    </head><body>

    <p><code>width</code> mit <code>overflow:hidden</code></p>

    <h1 style="width:200px; border:10px solid red; padding:10px; font-size:3em; overflow:hidden;">
    Eine Überschrift, die möglicherweise breiter ist als erlaubt</h1>

    <p><code>width</code> ohne <code>overflow</code></p>

    <h1 style="width:200px; border:10px solid red; padding:10px; font-size:3em;">
    Eine Überschrift, die möglicherweise breiter ist als erlaubt</h1>

    </body></html>

### Erläuterung:

Mit `width:` können Sie die Breite bestimmen. Erlaubt ist eine numerische Angabe oder der Wert `auto` für automatische Breite.

### Beachten Sie:

Dass im obigen Beispiel wo nötig in der Breite Text abgeschnitten wird, liegt nicht an der Eigenschaft `width`, sondern an der Angabe `overflow:hidden`. Die Browser der 4er-Generation interpretieren diese Angabe jedoch noch nicht. Wird für `overflow` kein von `visible` abweichender Wert notiert, vergrößert der Internet Explorer bis zur Version 6 das Element so weit, bis der Inhalt vollständig sichtbar ist.

## min-width (Mindestbreite)

Sie können bestimmen, wie breit ein Element oder Bereich mindestens sein soll, auch wenn der Inhalt weniger Breite in Anspruch nimmt.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>min-width</title>
    </head><body>

    <div style="position:absolute; top:100px; left:100px; min-width:400px; border:solid 1px blue;
    padding:10px">Fasse dich kurz!</div>

    </body></html>

### Erläuterung:

Mit `min-width:` können Sie die Mindestbreite bestimmen. Erlaubt ist eine numerische Angabe.

### Beachten Sie:

Der Internet Explorer 6 interpretiert diese Angabe noch nicht. Safari interpretiert sie bei positionierten Elementen ab Version 2.0.2.

## max-width (Maximalbreite)

Sie können bestimmen, wie breit ein Element oder Bereich maximal sein soll. Um zu bestimmen, was mit dem Inhalt passieren soll, wenn er mehr horizontalen Raum einnimmt als die hier angegebene Breite, können Sie zusätzlich die Eigenschaft overflow verwenden.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>max-width</title>
    </head><body>

    <h1 style="max-width:250px; overflow:hidden; border:solid 1px green; font-size:48px; padding:10px">
    Eine &Uuml;berschrift, bei der das Wort 'm&ouml;glicherweise' m&ouml;glicherweise zu breit
    f&uuml;r 250px ist</h1>

    </body></html>

### Erläuterung:

Mit `max-width:` können Sie die Maximalbreite bestimmen. Erlaubt ist eine numerische Angabe.

### Beachten Sie:

Der Internet Explorer 6 interpretiert diese Angabe noch nicht. Safari interpretiert sie bei positionierten Elementen ab Version 2.0.2.

## height (Höhe)

Sie können bestimmen, wie hoch ein Element oder Bereich sein soll. Um zu bestimmen, was mit dem Inhalt passieren soll, wenn er mehr vertikalen Raum einnimmt als die hier angegebene Höhe, können Sie zusätzlich die Eigenschaft overflow verwenden.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>height</title>
    </head><body>

    <p><code>height</code> mit <code>overflow:hidden</code></p>

    <h1 style="height:240px; width:300px; border:10px solid red; padding:10px; font-size:3em; overflow:hidden;">
    Eine Überschrift, die möglicherweise höher ist als erlaubt</h1>

    <p><code>height</code> ohne <code>overflow</code></p>

    <h1 style="height:240px; width:300px; border:10px solid red; padding:10px; font-size:3em;">
    Eine Überschrift, die möglicherweise höher ist als erlaubt</h1>

    </body></html>

### Erläuterung:

Mit `height:` können Sie die Höhe bestimmen. Erlaubt ist eine numerische Angabe oder der Wert `auto` für automatische Höhe.

### Beachten Sie:

Dass im obigen Beispiel wo nötig in der Höhe Text abgeschnitten wird, liegt nicht an der Eigenschaft `height`, sondern an der Angabe `overflow:hidden`. Die Browser der 4er-Generation interpretieren diese Angabe jedoch noch nicht. Wird für `overflow` kein von `visible` abweichender Wert notiert, vergrößert der Internet Explorer bis Version 6 das Element so weit, bis der Inhalt vollständig sichtbar ist.

## min-height (Mindesthöhe)

Sie können bestimmen, wie hoch ein Element oder Bereich mindestens sein soll.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>min-height</title>
    </head><body>

    <div style="position:absolute; top:100px; left:100px; min-height:200px; border:solid 1px blue;
    padding:10px"> Fasse dich kurz!</div>

    </body></html>

### Erläuterung:

Mit `min-height:` können Sie die Mindesthöhe bestimmen. Erlaubt ist eine numerische Angabe.

### Beachten Sie:

Der Internet Explorer 6 interpretiert diese Angabe noch nicht. Konqueror 3.1 interpretiert diese Angabe noch nicht bei absolut positionierten Elementen, ab Konqueror 3.3 stellt er auch solche absolut positionierte Elemente korrekt dar. Safari interpretiert `min-height` bei positionierten Elementen ab Version 2.0.2.

## max-height (Maximalhöhe)

Sie können bestimmen, wie hoch ein Element oder Bereich maximal sein soll. Um zu bestimmen, was mit dem Inhalt passieren soll, wenn er mehr vertikalen Raum einnimmt als die hier angegebene Höhe, können Sie zusätzlich die Eigenschaft overflow verwenden.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>max-height</title>
    </head><body>

    <h1 style="max-width:300px; max-height:300px; overflow:hidden; border:solid 1px green;
    font-size:48px; padding:10px">Eine &Uuml;berschrift, die m&ouml;glicherweise zu hoch
    ist f&uuml;r eine Box von 300 mal 300 Pixel</h1>

    </body></html>

### Erläuterung:

Mit `max-height:` können Sie die Maximalhöhe bestimmen. Erlaubt ist eine numerische Angabe.

### Beachten Sie:

Der Internet Explorer 6 interpretiert diese Angabe noch nicht. Safari interpretiert sie bei positionierten Elementen ab Version 2.0.2.

## overflow (Elementbereich mit übergroßem Inhalt)

Diese Angabe kann von Bedeutung sein, wenn Sie für ein Element oder einen Bereich eine feste oder maximale gewünschte Breite oder Höhe definieren. Angenommen, Sie definieren einen Bereich mit `<div>`...`</div>`, für den Sie mit Hilfe der Eigenschaft `width` eine Breite von effektiv 202 Pixel (da der Rahmen addiert wird) erzwingen. Wenn Sie innerhalb dieses Bereichs eine Grafikreferenz (`<img>`) notieren, bei der das Bild eine Breite von mehr als 200 Pixel aufweist, können Sie mit der hier beschriebenen Angabe regulieren, wie der Browser diesen Konflikt lösen soll.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>overflow</title>
    </head><body>

    <div style="width:200px; height:150px; overflow:auto; border:1px solid #840; margin:1em;">
      beliebiger Hund: <code>auto</code><br>
      <img src="hund.gif" width="208" height="181" alt="Hund">
    </div>

    <div style="width:200px; height:150px; overflow:hidden; border:1px solid #840; margin:1em;">
      abgeschnittener Hund: <code>hidden</code><br>
      <img src="hund.gif" width="208" height="181" alt="Hund">
    </div>

    <div style="width:200px; height:150px; overflow:scroll; border:1px solid #840; margin:1em;">
      scrollender Hund: <code>scroll</code><br>
      <img src="hund.gif" width="208" height="181" alt="Hund">
    </div>

    <div style="width:200px; height:150px; overflow:visible; border:1px solid #840; margin:1em;">
      sichtbarer Hund: <code>visible</code><br>
      <img src="hund.gif" width="208" height="181" alt="Hund">
    </div>

    </body>
    </html>

### Erläuterung:

Mit `overflow:` können Sie bestimmen, wie übergroße innere Elemente behandelt werden. Folgende Angaben sind möglich:

`visible` = Inhalt ragt aus dem Element so weit heraus, dass sein Inhalt auf jeden Fall komplett sichtbar ist.
`hidden` = Inhalt wird abgeschnitten, wenn er die Grenzen des Elements überschreitet.
`scroll` = Inhalt wird abgeschnitten, wenn er die Grenzen des Elements überschreitet. Der WWW-Browser sollte jedoch Scroll-Leisten anbieten, ähnlich wie bei einem eingebetteten Frame-Fenster.
`auto` = Der Web-Browser soll entscheiden, wie das Element im Konfliktfall angezeigt wird. Auch das Anbieten von Scroll-Leisten soll dabei erlaubt sein.

### Beachten Sie:

Netscape 4.x beherrscht nur `overflow:hidden` korrekt. Der Internet Explorer bis Version 6 vergrößert bei `visible` das Element so weit, bis der Inhalt vollständig sichtbar ist. Opera bis Version 6 stellt `auto` wie `visible` und `scroll` wie `hidden` dar. Konqueror beherrscht die verschiedenen Angaben erst ab Version 3.4 korrekt.

## direction (Richtung)

Mit dieser Angabe können Sie die Schreibrichtung bei Elementen erzwingen, und abhängig davon auch, in welche Richtung beispielsweise Breitenangaben berechnet werden, oder an welcher Seite überbreite Inhalte mit overflow abgeschnitten werden. Die Schreibrichtung ist vor allem für die Darstellung von Schriftkulturen wie der arabischen gedacht, wo von rechts nach links geschrieben wird.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>direction</title>
    </head><body style="direction:rtl">

    <h1>Hi Junkie!</h1>
    <p>Hier k&ouml;nnte m&ouml;glicherweise alles anders aussehen als normal ...</p>

    </body></html>

### Erläuterung:

Mit `direction:` können Sie die Schreibrichtung bestimmen. Folgende Angaben sind möglich:

`ltr` = von links nach rechts.
`rtl` = von rechts nach links.

### Beachten Sie:

Die Browser der 4er-Generation interpretieren diese Angabe noch nicht.

## float (Textumfluss)

Sie können für einen Bereich oder ein Element bestimmen, dass nachfolgende Elemente diesen Bereich bzw. dieses Element umfließen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>float</title>
    </head><body>

    <h1 style="width:400px; float:left; color:red">&Uuml;berschrift mal anders</h1>
    <p style="font-size:120%">Eine &Uuml;berschrift
    muss nicht immer einen langweiligen, &uuml;ber die ganze
    Breite des Anzeigefensters gehenden Block erzeugen. Sie kann auch mal
    seitlich vom Text stehen, und der Text flie&szlig;t um die
    &Uuml;berschrift. Auch so kann man lange Texte mal anders gestalten als
    sonst &uuml;blich.</p>

    </body></html>

### Erläuterung:

Mit `float:` können Sie bestimmen, dass nachfolgende Elemente das aktuelle Element bzw. den aktuellen Bereich umfließen. Folgende Angaben sind möglich:

`left` = Element steht links und wird rechts davon von nachfolgenden Elementen umflossen.
`right` = Element steht rechts und wird links davon von nachfolgenden Elementen umflossen.
`none` = Kein Umfluss (Normaleinstellung).

### Beachten Sie:

Wenn Sie für ein Element eine Angabe zu `float` notieren, mussten Sie gemäß CSS2 auch eine Angabe zu width definieren. Gemäß CSS 2.1 (und der tatsächlichen Umsetzung durch die Browser) ist dies nicht mehr erforderlich; die Breite richtet sich in diesem Fall nach dem Inhalt.

## clear (Fortsetzung bei Textumfluss)

Wenn Sie mit float einen Textumfluss definieren, möchten Sie vielleicht nur zwei oder drei Zeilen kommentierenden Text neben einem umflossenen Element haben und den folgenden Text dann unterhalb des umflossenen Elements fortsetzen. Dazu dient die hier beschriebene Angabe.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>clear</title>
    </head><body>

    <div style="float:left; margin-right:20px; margin-bottom:20px;
    border:solid 1px red; text-align:center">
    Kapitel<br>
    <span style="font-family:Algerian,serif; font-size:96px; color:red">
    &nbsp;1&nbsp;</span></div>
    <p style="font-size:120%">In diesem Kapitel geht es um Einf&uuml;hrendes.</p>
    <p style="clear:left">Dann kommen wir mal zur Sache: ...</p>

    </body></html>

### Erläuterung:

Mit `clear:` können Sie einen Umfluss abbrechen und die Fortsetzung unterhalb des umflossenen Elements oder Bereichs erzwingen. Folgende Angaben sind möglich:

`left` = Erzwingt bei `float:left` die Fortsetzung unterhalb.
`right` = Erzwingt bei `float:right` die Fortsetzung unterhalb.
`both` = Erzwingt in jedem Fall die Fortsetzung unterhalb.
`none` = Erzwingt keine Fortsetzung unterhalb. (Normaleinstellung).

Im obigen Beispiel werden die Eigenschaften `float` und `clear` dazu genutzt, eine seitliche, große Kapitelnummer zu notieren, neben der Kapitelnummer einen kleinen Text, worum es in dem Kapitel geht, und unterhalb dieser beiden Elemente dann den normalen Text des Kapitels.

## z-index (Schichtposition bei Überlappung)

Diese Eigenschaft wirkt nur in Verbindung mit einer Angabe zu position. Wenn Sie mehrere Elemente positionieren, deren Anzeigebereiche sich überlappen, werden die Elemente normalerweise in der Reihenfolge übereinander angezeigt, in der sie definiert werden. Im Quelltext später notierte Elemente überdecken vorhergehende. Sie können die Reihenfolge ändern, indem Sie für die einzelnen Elemente Werte vergeben. Elemente mit höherem Wert überdecken Elemente mit niedrigerem.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>z-index</title>
    </head><body>

    <div style="position:absolute; top:100px; left:100px; z-index:2; border:1px solid #888; background:#f88;">
      <b>A:2</b><img src="hund.gif" width="208" height="181" alt="Hund">
    </div>

    <div style="position:absolute; top:130px; left:130px; z-index:1; border:1px solid #888; background:#88f;">
      <b>B:1</b><img src="hund.gif" width="208" height="181" alt="Hund">
    </div>

    <div style="position:absolute; top:190px; left:270px; width:280px; height:280px; z-index:3;
                border:1px solid #888; background:#eee;">
      <b>C:3</b>

      <div style="position:absolute; top:30px; left:-30px; z-index:2; border:1px solid #888; background:#8f8;">
        <b>D:2</b><img src="hund.gif" width="208" height="181" alt="Hund">
      </div>

      <div style="position:absolute; top:-30px; left:40px; z-index:3; border:1px solid #888; background:#ff8;">
        <b>E:3</b><img src="hund.gif" width="208" height="181" alt="Hund">
      </div>

      <div style="position:absolute; top:60px; left:-60px; z-index:-1; border:1px solid #888; background:#8ff;">
        <b>F:-1</b><img src="hund.gif" width="208" height="181" alt="Hund">
      </div>
    </div>

    </body></html>

### Erläuterung:

Mit `z-index:` können Sie die Reihenfolge von überlappenden Elementen bestimmen. Notieren Sie für jedes Element, für das Sie eine eindeutige Schichtposition festlegen wollen, eine Zahl. Je höher die Zahl, desto weiter vorne liegt das Element, je niedriger, desto weiter hinten liegt das Element vom Betrachter aus gesehen. Die Schichtposition orientiert sich darüber hinaus an der des Elternelements. Per `z-index` positionierte Elemente erzeugen für sich und ihre Nachfahren einen eigenen Stapel-Kontext. So werden im Beispiel die Boxen D, E und F als Nachfahren der Box C gesondert sortiert: Box F (`z-index:-1`) überdeckt trotz niedrigerem Wert Box B (`z-index:1`), da sie als Nachfahre von Box C (diese liegt mit `z-index:3` über Box B) lediglich innerhalb dieser sortiert wird. Außerhalb des neuen Kontexts liegende Elemente (A und B) können nicht zwischen diesen gestapelt werden.

### Beachten Sie:

Mozilla Firefox sortiert aufgrund des negativen Wertes Box F (`z-index:-1`) hinter deren Elternelement (Box C, deren Stapelposition innerhalb des neu erzeugten Kontexts mit 0 angenommen wird) und weicht damit von Opera und Internet Explorer ab, die Nachfahren nicht hinter dem kontexterzeugenden Element selbst darstellen. Diese Vorgangsweise entspricht CSS2, während die beiden letztgenannten Browser in diesem Zusammenhang bereits die Spezifikation gemäß CSS 2.1 umsetzen.

## display (Anzeigeart bzw. Nichtanzeige ohne Platzhalter)

Sie können bestimmen, ob ein Element zunächst angezeigt werden soll oder nicht. "Ohne Platzhalter" bedeutet, dass bei Nichtanzeige des Elements auch kein Raum für das Element reserviert wird. In diesem Fall deutet bei der Anzeige also zunächst nichts darauf hin, dass das Element überhaupt existiert. Mit Hilfe von Dynamischem HTML können Sie so ein Element nachträglich anzeigen oder wieder verstecken.

Ferner können Sie mit der hier beschriebenen Angabe bestimmen, wie ein Element angezeigt werden soll. Sie können bestimmen, dass es einen eigenen (absatzerzeugenden) Block bilden soll, oder dass es mitten im Text (inline) angezeigt werden soll. So können Sie beispielsweise absatzerzeugende Elemente wie Überschriften in Elemente umdefinieren, die keinen eigenen Absatz erzeugen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>display</title>
    </head><body>

    <h1 style="display:inline">Ich bin ein inline-Element</h1>
    <p style="display:inline">&nbsp;Dieser Text beweist es!</p>
    <h1 id="versteckt" style="display:none">
    Ich bin ein Block-Element, werde aber nicht angezeigt</h1>
    <p>Und dieser Text tut so, als ob sonst nichts w&auml;re!</p>

    </body></html>

### Erläuterung:

Mit `display:` können Sie die Anzeige von Elementen unterdrücken oder die Art der Anzeige festlegen. Folgende Angaben sind möglich:

`block` = Erzwingt einen Block - das Element erzeugt eine neue Zeile.
`inline` = Erzwingt die Anzeige im Text - das Element wird im laufenden Textfluss angezeigt.
`inline-block` = Erzeugt äußerlich einen Block, für den Breite, Höhe und Außenabstand angegeben werden kann, belässt das Element jedoch im laufenden Textfluss - ähnlich einem "inline replaced element" wie `img`. Dieser Wert wird erst mit CSS 2.1 eingeführt.
`list-item` = wie `block`, jedoch mit einem Aufzählungszeichen (Bullet) davor.
`run-in` = bewirkt, dass das Element kontext-abhängig als Block-Element oder als Inline-Element dargestellt wird.
`none` = Element wird nicht angezeigt und es wird auch kein Platzhalter freigelassen.

In CSS2 waren noch die folgenden Werte vorgesehen, die jedoch wegen mangelnder Browserunterstützung in CSS 2.1 nicht übernommen werden:
`marker` = sollte automatisch generierten Inhalt für das Element deklarieren.
`compact` = sollte wie `run-in` bewirken, dass ein Element kontext-abhängig als Block-Element oder als Inline-Element dargestellt wird.

Speziell für die Erzeugung von Tabellen mit Nicht-Tabellen-Elementen stehen weitere Angaben zu `display` zur Verfügung. Die entsprechenden Angaben lassen sich allerdings auch auf entsprechende HTML-Tabellenelemente anwenden. Gedacht sind sie aber eher für die tabellarische Darstellung von XML-Daten. Denn XML kennt kein Handling, um Daten als tabellarisch auszuzeichnen. Das muss die Style-Sprache übernehmen, mit deren Hilfe die XML-Daten angezeigt werden. In CSS hat man die `display`-Eigenschaft zu diesem Zweck auserkoren. Folgende Angaben sind in diesem Zusammenhang möglich:

`table` = Das Element enthält tabellarisch angeordnete Kindelemente und erzeugt eine neue Zeile. Wirkt wie das `table`-Element in HTML.
`inline-table` = Das Element enthält tabellarisch angeordnete Kindelemente und wird im laufenden Textfluss angezeigt. Wirkt wie das `table`-Element in HTML, aber inline.
`table-row` = Das Element enthält nebeneinander angeordnete Kindelemente. Wirkt wie das `tr`-Element in HTML.
`table-cell` = Das Element steht für eine Tabellenzelle. Wirkt wie die Elemente `th` und `td` in HTML.
`table-row-group` = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das `tbody`-Element in HTML.
`table-header-group` = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Gedacht für die Kopfzeile einer Tabelle. Wirkt wie das `thead`-Element in HTML.
`table-footer-group` = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Gedacht für die Fußzeile einer Tabelle. Wirkt wie das `tfoot`-Element in HTML.
`table-column` = Das Element beschreibt die Eigenschaften der Zellen in einer Spalte. Wirkt wie das `col`-Element in HTML.
`table-column-group` = Das Element enthält eine Gruppe von Elementen, die die Eigenschaft von Zellen in einer Spalte beschreiben. Wirkt wie das `colgroup`-Element in HTML.
`table-caption`. Das Element steht für eine Tabellenüberschrift. Wirkt wie das `caption`-Element in HTML (auch für `th`-Elemente).

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>display</title>
    <style type="text/css">
    div.table { display:table; border-collapse:collapse; }
    div.tr { display:table-row; }
    div.td { display:table-cell; border:thin solid red; padding:5px; }
    </style>
    </head><body>

    <div class="table">
     <div class="tr">
      <div class="td">ich</div>
      <div class="td">bin</div>
      <div class="td">eine</div>
      <div class="td">Tabelle</div>
     </div>
    </div>

    </body></html>

### Erläuterung:

Das Beispiel definiert Klassen für `div`-Elemente. Die Klassennamen heißen genauso wie bekannte HTML-Tabellenelemente. Das muss nicht so sein und ist hier nur zu Demonstrationszwecken so. Die jeweiligen Klassen erhalten mit Hilfe von `display` Eigenschaften, durch die sich die Elemente, denen sie zugewiesen werden, wie die entsprechenden HTML-Elemente für Tabellen verhalten. Innerhalb des Dateikörpers wird dann im Beispiel eine waschechte Tabelle aus `div`-Elementen mit `class`-Attributen zusammengebaut.

### Beachten Sie:

Netscape 4.0 und der Internet Explorer 4.0 interpretieren die Angabe `display:none` korrekt. Die übrigen Angaben werden von der 4er-Versionen der beiden Browser jedoch nur unvollständig oder noch gar nicht interpretiert. Die Angaben zu den Tabelleneigenschaften werden von Netscape 6.0 interpretiert, vom Internet Explorer jedoch auch in der Version 7 noch nicht.

## visibility (Anzeige bzw. Nichtanzeige mit Platzhalter)

Sie können bestimmen, ob ein Element zunächst angezeigt werden soll oder nicht. "Mit Platzhalter" bedeutet, dass bei Nichtanzeige des Elements trotzdem Raum für das Element reserviert wird. Mit Hilfe von Dynamischem HTML können Sie so ein Element nachträglich anzeigen oder wieder verstecken.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>visibility</title>
    <script type="text/javascript">
    function onoff () {
      if (document.getElementById)
        document.getElementById("Ueberschrift").style.visibility = "visible";
        document.getElementById("Zeile").style.visibility = "collapse";
    }
    </script>
    </head><body>

    <h1 id="Ueberschrift" style="visibility:hidden">Die Überschrift zum Text</h1>
    <p>Hier der Text. Aber fehlt da nicht was?</p>

    <table border="1">
      <tr>
        <td>A1</td>
        <td>A2</td>
        <td>A3</td>
      </tr>
      <tr id="Zeile">
        <td>B1</td>
        <td>B2</td>
        <td>B3</td>
      </tr>
      <tr>
        <td>C1</td>
        <td>C2</td>
        <td>C3</td>
      </tr>
    </table>

    <p><a href="javascript:onoff()">Überschrift anzeigen, Zeile B verstecken!</a></p>

    </body></html>

### Erläuterung:

Mit `visibility:` können Sie bestimmen, ob ein Element anfangs angezeigt wird oder nicht. Folgende Angaben sind möglich:

`visible` = Der Inhalt des Element wird angezeigt (Normaleinstellung).
`hidden` = Der Inhalt des Element wird versteckt (nicht angezeigt).
`collapse` = Spalten oder Reihen einer Tabelle werden versteckt und geben den zuvor benötigten Platz frei. Wirkt auf alle anderen Elemente wie `hidden`.

Im obigen Beispiel wird die Überschrift zunächst nicht, die Tabelle jedoch vollständig angezeigt. Beim Anklicken des Verweises wird dies jedoch dynamisch geändert. Auf die dazu erforderlichen JavaScript-Befehle wird an dieser Stelle nicht näher eingegangen.

### Beachten Sie:

Lediglich Mozilla Firefox gibt in obigem Beispiel den für Zeile B reservierten Platz frei.

## clip (Anzeigebereich eingrenzen)

Sie können bestimmen, dass nur ein Ausschnitt eines Elements sichtbar angezeigt wird, unabhängig davon, welche Angaben sonst zur Größe des Elements gemacht wurden und unabhängig von der automatischen Größe des Elements. Wenn das Element größer ist als der so definierte Anzeigebereich, wird es an den Seiten entsprechend abgeschnitten. Derzeit können Sie nur ein Rechteck für den Ausschnitt definieren. In Zukunft sollen jedoch auch Polygone, Kreise bzw. Ellipsen möglich sein.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>clip</title>
    </head><body>

    <div style="position:absolute; top:100px; left:100px; clip:rect(0px, 130px, 130px, 0px);">
    Etwas Hund:<br>
    <img src="hund.gif" width="208" height="181" alt="Hund"></div>

    </body></html>

### Erläuterung:

Mit `clip:` können Sie einen Ausschnitt für die sichtbare Anzeige definieren. Dahinter folgt der Bezeichner `rect` (für rectangle, = Rechteck), und dahinter, in runde Klammern eingeschlossen, vier durch Beistriche getrennte numerische Werte oder das Schlüsselwort `auto` zur Bestimmung des Ausschnitts.

Der erste der vier Werte bezeichnet den Wert für "oben", gemessen an der oberen Elementgrenze
Der zweite der vier Werte bezeichnet den Wert für "rechts", gemessen an der linken Elementgrenze
Der dritte der vier Werte bezeichnet den Wert für "unten", gemessen an der oberen Elementgrenze
Der vierte der vier Werte bezeichnet den Wert für "links", gemessen an der linken Elementgrenze

Damit überhaupt ein Ausschnitt sichtbar ist, muss der Wert für "unten" größer sein als der für "oben" und der Wert für "rechts" größer als der für "links". Das Schlüsselwort `auto` bedeutet: keine Angabe zu dem betreffenden Wert, das Element soll an der entsprechenden Seite bis zu seiner Elementgrenze angezeigt werden. Negative Werte sind gemäß CSS 2.1 nicht mehr erlaubt.

### Beachten Sie:

Die Eigenschaft `clip` wirkt nur auf absolut positionierte Elemente, deren Wert für overflow von `visible` abweicht.

Im Internet Explorer funktioniert `clip` im standardkonformen Modus nur dann, wenn bei der Wertzuweisung auf die – gemäß CSS 2.1 nun zwingend vorgeschriebenen – Kommata verzichtet wird. Auch Version 7 ist von diesem Fehler betroffen.

| Layouts für Printmedien
| Pseudoelemente und Pseudoklassen

© 2007 Impressum