Stil mit {stil}

Mar 09

CSS top, right, bottom, left • Platzieren von positionierten Elementen

Die CSS-Eigenschaften top, right, bottom und left regeln die Position eines absolut oder fest (fixed) positionierten Elements innerhalb des Browserfensters. Die CSS-Eigenschaften margin-top, margin-right, margin-bottom und margin-left hingegen regeln den Abstand von statisch, relativ oder durch float positionierten Elementen gegenüber den umfassenden Block.

Diese vier Eigenschaften werden mit der CSS-Eigenschaft position benutzt. Der umfassende Block hängt dabei von der Art der Positionierung ab: Wenn das Element absolut positioniert wird, ist der umfassende Block das Browserfenster, ebenso bei fester Positionierung. Bei relativer Positionierung ist der umfassende Block das Dokument. Bei statischer Positionierung liegt das Element im Inhaltsfluss und die Angaben top, right, bottom und left haben keine Auswirkungen.

#main { margin-top: 20px; margin-left: 150px; background: lavender;  }
#left { position: absolute; top: 20px; left: 10px; background: ivory; }

<div id="main">
<p>Lorem ipsum …  </p>
</div>

<div id="left">
<ul> … </ul>
</div>

Die CSS-Eigenschaften top und left steuern den Abstand der absolut positionierten gelben Box vom Rand des Browserfensters, margin-left und margin-top den Abstand der statisch positionierten blauen Box vom umfassenden Block … in diesem Fall das body-Element.

top | right | bottom | left

IE4+ M1 N4+ O5+ S1 CSS2 Erblich: Nein

top right bottom left

top ist der Abstand des oberen Randes des Inhalts zum oberen Rand des umfassenden Blocks.

right ist der Abstand des rechten Randes des Inhalts zum rechten Rand des umfassenden Blocks.

bottom ist der Abstand des unteren Randes des Inhalts zum unteren Rand des umfassenden Blocks.

left ist der Abstand des linken Randes des Inhalts zum linken Rand des umfassenden Blocks.

Werte

<length> | <percentage> | auto | inherit

auto (Voreinstellung)

legt fest, dass der Browser den Abstand zum umfassenden Block bestimmt. Wenn sowohl width oder height als auch right oder left als "auto" angegeben werden, wird die Breite des Elements durch seine Inhalte bestimmt (ähnlich wie bei Tabellen).

<length>

cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).

<percentage>

legt den Abstand des Elements zum umfassenden Block relativ zur Größe des umfassenden Blocks fest. Das Prozentzeichen ist zwingend erforderlich.

zurück zum Seitenanfang