CSS -Layout - Die position -Eigenschaft
Die positionEigenschaft gibt die Art der Positionierungsmethode an, die für ein Element verwendet wird (statisch, relativ, fixiert, absolut oder fest).
Die Position Eigentum
Die positionEigenschaft gibt die Art der Positionierungsmethode an, die für ein Element verwendet wird.
Es gibt fünf verschiedene Positionswerte:
staticrelativefixedabsolutesticky
Elemente werden dann unter Verwendung der top-, bottom-, left- und right-Eigenschaften positioniert. Diese Eigenschaften funktionieren jedoch nur, wenn die position
Eigenschaft zuerst festgelegt wird. Sie arbeiten auch je nach Positionswert unterschiedlich.
Position: statisch;
HTML-Elemente werden standardmäßig statisch positioniert.
Statisch positionierte Elemente werden von den Eigenschaften top, bottom, left und right nicht beeinflusst.
Ein Element mit position: static;wird nicht besonders positioniert; es wird immer entsprechend dem normalen Fluss der Seite positioniert:
Hier ist das verwendete CSS:
Beispiel
div.static {
position: static;
border: 3px solid #73AD21;
}
Position: relativ;
Ein Element mit position: relative;wird relativ zu seiner normalen Position positioniert.
Das Festlegen der Eigenschaften „oben“, „rechts“, „unten“ und „links“ eines relativ positionierten Elements führt dazu, dass es von seiner normalen Position weg angepasst wird. Andere Inhalte werden nicht angepasst, um in eine Lücke zu passen, die das Element hinterlassen hat.
Hier ist das verwendete CSS:
Beispiel
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
Position: fest;
Ein Element mit position: fixed;wird relativ zum Viewport positioniert, d. h. es bleibt immer an der gleichen Stelle, auch wenn die Seite gescrollt wird. Die Eigenschaften top, right, bottom und left werden verwendet, um das Element zu positionieren.
Ein festes Element hinterlässt keine Lücke auf der Seite, wo es sich normalerweise befinden würde.
Beachten Sie das fixierte Element in der unteren rechten Ecke der Seite. Hier ist das verwendete CSS:
Beispiel
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
position: fixed;Position: absolut;
Ein Element mit position: absolute;wird relativ zum nächsten positionierten Vorfahren positioniert (anstatt relativ zum Ansichtsfenster positioniert, wie fixiert).
Jedoch; Wenn ein absolut positioniertes Element keine positionierten Vorfahren hat, verwendet es den Textkörper des Dokuments und bewegt sich beim Scrollen der Seite mit.
Hinweis: Absolut positionierte Elemente werden aus dem normalen Fluss entfernt und können Elemente überlappen.
Hier ist ein einfaches Beispiel:
Hier ist das verwendete CSS:
Beispiel
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
Position: klebrig;
Ein Element mit position: sticky;wird basierend auf der Bildlaufposition des Benutzers positioniert.
Ein Sticky-Element wechselt zwischen relativeund fixed, je nach Scroll-Position. Es wird relativ positioniert, bis eine bestimmte Versatzposition im Ansichtsfenster erreicht wird - dann "klebt" es an Ort und Stelle (wie position:fixed).
Hinweis: Internet Explorer unterstützt keine Sticky-Positionierung. Safari erfordert ein -webkit- Präfix (siehe Beispiel unten). Sie müssen auch mindestens eines von , oder angeben top, damit rightdie Sticky-Positionierung funktioniert.bottomleft
In diesem Beispiel bleibt das Sticky-Element oben auf der Seite ( top: 0), wenn Sie seine Bildlaufposition erreichen.
Beispiel
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Text in einem Bild positionieren
So positionieren Sie Text über einem Bild:
Beispiel
Versuch es selber:
Mehr Beispiele
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
All CSS Positioning Properties
| Property | Description |
|---|---|
| bottom | Sets the bottom margin edge for a positioned box |
| clip | Clips an absolutely positioned element |
| left | Sets the left margin edge for a positioned box |
| position | Specifies the type of positioning for an element |
| right | Sets the right margin edge for a positioned box |
| top | Sets the top margin edge for a positioned box |