CSS position Eigenschaft
- vorherige Seite pointer-events
- Nächste Seite @property
Definition und Verwendung
Das Attribut position legt den Typ der Positionierung des Elements fest.
Beschreibung
Diese Eigenschaft definiert das Positionierungssystem, das zur Erstellung der Elementlayout verwendet wird. Jedes Element kann positioniert werden, jedoch erzeugen absolute oder festgelegte Elemente einen Block-Container, unabhängig vom Typ des Elements selbst. Relativ positionierte Elemente verschieben sich relativ zu ihrer Standardposition im normalen Fluss.
Siehe auch:
CSS Tutorial:CSS Positionierung
HTML DOM Referenzhandbuch:position-Eigenschaft
Beispiel
Positionieren Sie das h2-Element:
h2
{
position:absolute;
left:100px;
top:150px;
}
CSS Syntax
position: static|absolute|fixed|relative|sticky|initial|inherit;
Eigenschaftswert
| Wert | Beschreibung |
|---|---|
| absolute |
Erzeugt ein Element mit absoluter Positionierung, das relativ zum ersten Eltern-Element außerhalb der statischen Positionierung positioniert wird. Die Position des Elements wird durch die Attribute "left", "top", "right" und "bottom" festgelegt. |
| fixed |
Erzeugt ein Element mit absoluter Positionierung, das relativ zum Browserfenster positioniert wird. Die Position des Elements wird durch die Attribute "left", "top", "right" und "bottom" festgelegt. |
| relative |
Erzeugt ein Element mit relativer Positionierung, das relativ zu seiner normalen Position positioniert wird. Daher wird "left:20" 20 Pixel zum LINKEN Standort des Elements hinzufügen. |
| static | Standardwert. Keine Positionierung, das Element erscheint im normalen Fluss (ignoriert top, bottom, left, right oder z-index-Auflösungen). |
| inherit | Es wird angegeben, dass der Wert der position-Eigenschaft vom Eltern-Element geerbt werden soll. |
Technische Details
| Standardwert: | static |
|---|---|
| Vererbbarkeit: | nein |
| Version: | CSS2 |
| JavaScript Syntax: | object.style.position="absolute" |
TIY Beispiel
- Positionierung: Relativ positioniert
- Dieses Beispiel zeigt, wie Elemente relativ zu ihrer normalen Position positioniert werden.
- Positionierung: Absolut positioniert
- Dieses Beispiel zeigt, wie Elemente mit absoluten Werten positioniert werden.
- Positionierung: Fest positioniert
- Dieses Beispiel zeigt, wie Elemente relativ zum Browserfenster positioniert werden.
- Form des Elements einstellen
- Dieses Beispiel zeigt, wie die Form eines Elements eingestellt wird. Dieses Element wird in diese Form geschnitten und angezeigt.
- Z-index
- Z-index kann verwendet werden, um ein Element hinter einem anderen Element zu platzieren.
- Z-index
- Der Element im obigen Beispiel hat die Z-index geändert.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browser-Version an, die diese Eigenschaft vollständig unterstützt.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 7.0 | 1.0 | 1.0 | 4.0 |
- vorherige Seite pointer-events
- Nächste Seite @property
