Position
Legt die Art der Positionierung des Objekts fest.
Syntax
{ position: sPosition }
Mögliche Werte
sPosition
Zeichenfolge, mit der einer der folgenden Werte angegeben oder empfangen wird:
static |
Standard. Objekt hat keine besondere Position; es folgt den HTML-Layoutregeln. |
absolute |
Objekt ist relativ zur Position des übergeordneten Elements oder wird mit den Eigenschaften top und left zum body-Objekt positioniert, wenn das übergeordnete Element nicht positioniert ist. |
fixed |
Objekt ist relativ zum Browserfenster positioniert, das den Inhalt enthält. |
relative |
Objekt ist entsprechend dem normalen Fluss positioniert und wird dann durch die Eigenschaften top und left verschoben. |
Diese Eigenschaft hat den Standardwert static. Die CSS-Eigenschaft wird nicht vererbt.
Hinweise
Die Festlegung der Eigenschaft auf absolute zieht das Objekt aus dem "Fluss" des Dokuments und positioniert es ohne Rücksicht auf das Layout der es umgebenden Objekte. Belegen andere Objekte bereits die gegebene Position, beeinträchtigen sie nicht das positionierte Objekt, und das positionierte Objekt beeinträchtigt sie nicht. Stattdessen werden alle Objekt am gleichen Ort angelegt, was ein Überlappen der Objekte zur Folge hat. Dieses Überlappen lässt sich mit der z-index-Eigenschaft steuern. Absolut positionierte Objekte haben keine Ränder, aber Rahmen und Innenabstände.
Um die absolute Positionierung eines Objekts zu aktivieren, müssen Sie mindestens eine der Eigenschaften top, bottom, left oder right festlegen, und zusätzlich die position-Eigenschaft auf absolute setzen. Andernfalls verwenden diese Positionierungseigenschaften ihren Standardwert absolute, der bewirkt, dass das Objekt sofort nach den vorherigen Elementen entsprechend der HTML-Layoutregeln dargestellt wird.
Die Festlegung der Eigenschaft als relative platziert das Objekt im natürlichen HTML-Fluss des Dokuments, verschiebt jedoch die Position des Objekts auf Grundlage des vorherigen Inhalts. Die folgende Syntax zeigt, wie ein hochgestellter Text erstellt wird, indem der Text in ein SPAN-Element platziert wird, dass relativ zum restlichen Text im Absatz positioniert ist.
<p>The superscript in this name
<span style="position:relative; top:-3px">xyz </span> is "xyz".</p>
Text und Objekte, die einem relativ positionierten Objekt folgen, belegen ihren eigenen Platz und überlappen nicht den natürlichen Raum für das positionierte Objekt. Im Gegensatz dazu belegen Texte und Objekte, die einem absolut positionierten Objekt folgen, den Platz, der für das positionierte Objekt vorgesehen war, bevor es aus dem Fluss gezogen wurde. Wird ein absolut positioniertes Objekt über den sichtbaren Bereich eines Fensters hinaus platziert, wird eine Bildlaufleiste angezeigt. Werden relativ positionierte Objekte über den sichtbaren Bereich hinaus platziert, wird keine Bildlaufleiste angezeigt.
Die Größe des Inhalts bestimmt die Größe von Objekten mit Layout. Durch die Festlegung der Eigenschaften height und position für ein <div>-Objekt erhält z. B. dieses Objekt ein Layout. Der Inhalt des DIV-Objekts bestimmt die Größe. In diesem Fall bestimmt der Inhalt die Größe von width.
Beispiel
In diesem Beispiel werden die Werte für absolute, static und relative der position-Eigenschaft verwendet, um die Position des Texts zu ändern:
<style>
.pitem {position: static}
</style>
<script>
function fnAbsolute(){
ospan.style.position="absolute";
}
function fnRelative(){
ospan.style.position="relative";
}
function fnStatic(){
ospan.style.position="static";
}
</script>
<p>
<span id=ospan class="pitem">This is a span in a paragraph of text.</span>
This is a paragraph of text.</p>
<input onclick="fnRelative()" type=button value ="Relative">
<input onclick="fnAbsolute()" type=button value ="Absolute">
<input onclick="fnStatic()" type=button value ="Static">
Informationen zu Standards
Diese Eigenschaft ist unter Cascading Style Sheets (CSS), Level 2 (CSS2) (möglicherweise in englischer Sprache) definiert.
Gilt für
A, ADDRESS, APPLET, B, BDO, BIG, BLOCKQUOTE, BUTTON, CENTER, CITE, CODE, CUSTOM, DD, DEFAULTS, DFN, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HN, HR, I, IFRAME, IMG, INPUT TYPE=BUTTON, INPUT TYPE=CHECKBOX, INPUT TYPE=FILE, INPUT TYPE=IMAGE, INPUT TYPE=PASSWORD, INPUT TYPE=RADIO, INPUT TYPE=RESET, INPUT TYPE=SUBMIT, INPUT TYPE=TEXT, LI, OBJECT, OL, P, RUBY, S, SELECT, SPAN, SUB, TABLE, TD, TH, TR, TT, U, UL, VAR, XMP