Startseite
Mit CSS-Positionieren  
xgdown position: (Positionsart)
xgdown width: (Breite eines Elementes)
xgdown height: (Höhe eines Elementes)
xgdown overflow: (Höhe oder Breite eines Elementes festsetzen)
xgdown visibility: (Elemente verschwinden lassen)
xgdown clip:rect() (Anzeigebereich eingrenzen)
xgdown z-index: (Schichtposition bei Überlappung)
xgnext float (Textumfluss)

Feedback     Interesse an einer CD ?    

position: (Positionsart)

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

position:absolute; Mit position: können Sie die Positionsart bestimmen. Folgende Angaben sind erlaubt:
absolute = absolute Positionierung, gemessen am Rand des Elternelements. Scrollt mit.
fixed = absolute Positionierung, gemessen am Rand des Elternelements. Bleibt beim Scrollen stehen.
relative = relative Positionierung, gemessen an der Normalposition oder Anfangsposition des Elements selbst.
static = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).

Die Angabe position: legt noch nicht fest, wo genau ein Element beginnen soll. Die Angabe macht nur Sinn, wenn Sie zugleich die gewünschte Startposition angeben. Dies können Sie beispielsweise mit Angaben zur top oder left tun.

Beispiel: absolute Positionierung 
<html>
<head>
<title>position</title>
<style type="text/css">
<!--
h1      {font-family:Verdana,Arial,sans-serif; font-size:12pt;
         color:white; background-color:#000000;padding:5px;
         position:absolute; left:2cm; top:2cm;}
p       {font-family:Verdana,Arial,sans-serif; font-size:10pt;
         padding:10px; position:absolute;}
p.eins  {color:#FFFFFF;background-color:green;
         left:3cm; top:4cm;}
p.zwei  {color:#000000;background-color:yellow;
         left:9cm; top:5.2cm;}
-->
</style>
</head>
<body>

<h1>Dies ist eine positionierte Überschtift</h1>
<p class="eins">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Text xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
<p class="zwei">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Text xxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>

</body>
</html>
So sieht das aus:

  • Die Überschrift <h1> beginnt an der Stelle links:2cm und top:2cm.
  • Für alle Absätze <p> wird eine absolute Positionierung zugewiesen.
  • Für die Unterklasse eins der Klasse p wird der Positionswert angegeben. Da die Unterklasse p.eins automatisch die Eigenschaften der Klasse p erbt, steht auch fest, dass die Position absolut zu betrachten ist.
  • Genauso verhält es sich mit der zweiten abgeleiteten Unterklasse p.zwei.
  • Die Überschrift und die zwei verschieden definierten Absätze werden mit Texten gefüllt. Durch die Zuweisung der Stylesheets kann der Browser diese Elemente an ihren entsprechenden Positionen darstellen.

Beispiel: relative Positionierung 
Text1 Text2 Text3 Text4 Text5<br>
<span style="position:relative;left:10pt">Text 1</span>
<span style="position:relative;left:20pt">Text 2</span>
<span style="position:relative;left:30pt">Text 3</span>
<span style="position:relative;left:40pt">Text 4</span>
<span style="position:relative;left:50pt">Text 5</span>
Text1 Text2 Text3 Text4 Text5
Text 1 Text 2 Text 3 Text 4 Text 5

width: (Breite eines Elements)

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. Ansonsten wird der Text automatisch umbebrochen.

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

Beispiel:
<p style="width:200px;background-color:#E0E0E0;padding:5px">
Das ist ein Absatz mit der Breite 200px, der wird automatisch umgebrochen.
</p>

Das ist ein Absatz mit der Breite 200px, der wird automatisch umgebrochen.

height: (Höhe eines Elements)

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

height: Mit height: können Sie die Höhe bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto für automatische Höhe. Benötigt der Inhalt mehr Platz als angegeben, so wird die Höhe des Elementes automatisch angepasst.

Beispiel:
<p style="width:200px;height:70px;background-color:#E0E0E0;padding:5px">
Das ist ein Absatz mit der Breite 200px und der Höhe 70px.
</p>

Das ist ein Absatz mit der Breite 200px und der Höhe 70px.

overflow: (Höhe oder Breite eines Elementes festsetzen)

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 Style-Sheet-Angabe width eine Mindestbreite von 200 Pixeln erzwingen. Wenn Sie innerhalb dieses Bereichs eine Grafikreferenz (<img>) notieren, bei der das Bild eine Breite von mehr als 200 Pixeln hat, können Sie mit der hier beschriebenen Angabe regulieren, wie der Browser diesen Konflikt lösen soll.

overflow: Mit overflow: können Sie bestimmen, wie übergroße innere Elemente behandelt werden. Folgende Angaben sind möglich:
visible = Element wird so weit ausgedehnt, dass sein Inhalt auf jeden Fall komplett sichtbar ist.
hidden = Element wird abgeschnitten, wenn es die Grenzen überschreitet.
scroll = Element wird abgeschnitten, wenn es die Grenzen überschreitet. Der WWW-Browser sollte jedoch Scroll-Leisten anbieten, ähnlich wie in einem eingebetteten Framefenster.
auto = Der Web-Browser soll entscheiden, wie das Element im Konfliktfall angezeigt wird. Auch das Anbieten von Scroll-Leisten soll dabei erlaubt sein.

Beispiel:
<p style="overflow:hidden;width:200px;height:70px;
background-color:#E0E0E0;padding:5px">
Das ist ein Absatz mit der Breite 200px und der Höhe 70px.
Sollte der Text zu viel werden, wird er einfach abgeschnitten.
</p>

Das ist ein Absatz mit der Breite 200px und der Höhe 70px. Sollte der Text zu viel werden, wird er einfach abgeschnitten.

visibility: (Elemente verschwinden lassen)

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.

visibility: Mit visibility: können Sie bestimmen, ob ein Element anfangs angezeigt wird oder nicht. Folgende Angaben sind möglich:
hidden = Der Inhalt des Element wird zunächst versteckt (nicht angezeigt).
visible = Der Inhalt des Element wird zunächst angezeigt (Normaleinstellung).

Beispiel:
<script language="JavaScript" type="text/javascript">
<!--
function show_1() {
 if(document.getElementById)
   document.getElementById("Ueberschrift").style.visibility = "visible";
}
//-->
</script>

<h1 id="Ueberschrift" style="visibility:hidden">Die Überschrift zum Text</h1>
<p>Hier der Text. Aber fehlt da nicht was?</p>
<p><a href="javascript:show_1()">Anzeigen!</a></p>

Die Überschrift zum Text

Hier der Text. Aber fehlt da nicht was?

Anzeigen!

 
<script language="JavaScript" type="text/javascript">
<!--
function show_2() {
 if(document.getElementById)
   document.getElementById("bild").style.visibility = "visible";
}
//-->
</script>

<p><span id="bild" style="visibility:hidden">
<img src="img/dino1.gif" align="middle" width="126"
height="144" border="0" alt="dino1">
</span>
Wo ist der Dino?&nbsp;
<a href="javascript:show_2()">Anzeigen!</a></p>

Wo ist der Dino?  Anzeigen!

clip:rect() (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 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.

clip:rect() 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 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.

Beachten Sie:
Sowohl bei Netscape also auch beim Internet Explorer war die clip-Eigenschaft nur im Zusammenhang mit absolut positionierten Elementen nachvollziehbar.

Beispiel:
<html>
<head>
<title>clip</title>

</head>
<body>

<div style="position:absolute; top:100px; left:100px;
clip:rect(0px 130px 100px 0px);">
Etwas Dino:<br>
<img src="img/dino1.gif" width="126" height="144" border="0" alt="dino1">
</div>


</body>
</html>
So sieht das aus:

z-index: (Schichtposition bei Überlappung)

Diese Angabe ist sinnvoll in Verbindung mit mehreren Angaben zu position. Wenn Sie mehrere Elemente absolut positionieren, deren Anzeigebereiche sich überlappen, werden die Elemente normalerweise in der Reihenfolge übereinander angezeigt, in der sie definiert werden. Sie können die Reihenfolge ändern, indem Sie für die einzelnen Elemente Nummern vergeben. Elemente mit höherer Nummer überdecken Elemente mit niedrigerer Nummer.

z-index 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 das Element, je niedriger, desto weiter hinten das Element.

Beispiel:
<html>
<head>
<title>clip</title>

</head>
<body bgcolor="#FFFF80">

<div style="position:absolute; top:100px; left:100px;
z-index=1">
<b>1.</b>
<img src="img/dino1.gif" width="126" height="144" border="0" alt="dino1">
</div>

<div style="position:absolute; top:120px; left:150px;
z-index=4">
<b>1.</b>
<img src="img/dino1.gif" width="126" height="144" border="0" alt="dino1">
</div>

<div style="position:absolute; top:140px; left:200px;
z-index=2">
<b>1.</b>
<img src="img/dino1.gif" width="126" height="144" border="0" alt="dino1">
</div>

<div style="position:absolute; top:160px; left:250px;
z-index=3">
<b>1.</b>
<img src="img/dino1.gif" width="126" height="144" border="0" alt="dino1">
</div>

</body>
</html>
So sieht das aus:

Im obigen Beispiel wird vier mal der gleiche Bereich erzeugt - mit einem transparenten GIF-Bild als Inhalt. Die Bereiche überlappen sich aufgrund ihrer Angaben zur Positionierung und den Ausmaßen des Bildes. Normalerweise überlagert der letzte notierte Bereich alle anderen, da er als letzter notiert ist. Im Beispiel überlagert jedoch der zweite Bereich alle anderen, weil er die höchste z-index-Nummer erhält.