Die position - Eigenschaft gibt die Art des Positionierungsverfahren für ein Element verwendet (statisch, relativ fest oder absolut).
Die Lage der Immobilie
Die position - Eigenschaft gibt die Art der Positionierung Verfahren für ein Element verwendet wird .
Es gibt vier verschiedene Positionswerte:
-
static -
relative -
fixed -
absolute
Die Elemente werden dann positioniert, um die oben mit, unten, links und rechts Eigenschaften. Allerdings arbeiten diese Eigenschaften nicht , wenn die position Eigenschaft zuerst gesetzt. Sie arbeiten auch unterschiedlich, je nach dem Positionswert.
position: static;
HTML-Elemente sind so positioniert, statisch standardmäßig aktiviert.
Statische positionierte Elemente werden nicht von oben, unten, links und rechts Eigenschaften beeinflusst.
Ein Element mit position: static; ist in keiner besonderen Weise positioniert; es wird immer nach dem normalen Fluss der Seite positioniert:
Hier ist die CSS, die verwendet wird:
position: relative;
Ein Element mit position: relative; wird in seine normale Position relativ positioniert.
Einstellen der oberen, rechten, unteren und linken Eigenschaften eines relativ positionierten Element bewirkt es weg von seiner Normalposition eingestellt werden. Andere Inhalte werden nicht eingestellt werden, in jede Lücke durch das Element links zu passen.
Hier ist die CSS, die verwendet wird:
Beispiel
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
} Versuch es selber " position: fixed;
Ein Element mit position: fixed; ist mit dem Ansichtsfenster relativ positioniert, was es bedeutet immer bleibt an der gleichen Stelle , auch wenn die Seite gescrollt wird. Die oben, rechts, unten und links Eigenschaften werden verwendet, um das Element zu positionieren.
Ein festes Element hinterlässt keine Lücke in der Seite, wo es normalerweise gelegen hätte.
Beachten Sie das feste Element in der rechten unteren Ecke der Seite. Hier ist die CSS, die verwendet wird:
Beispiel
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
} Versuch es selber " position: absolute;
Ein Element mit position: absolute; relativ zum nächsten positioniert Vorfahren positioniert ist (anstatt relativ zu dem Darstellungs, wie festgelegt).
Aber; wenn ein absolutes positioniertes Element keine positioniert Vorfahren hat, verwendet er das Dokument Körper und bewegt sich mit Seite Scrollen entlang.
Hinweis: Ein "positioned" Element ist einer , dessen Position ist alles außer static .
Hier ist ein einfaches Beispiel:
Hier ist die CSS, die verwendet wird:
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;
}
Versuch es selber " Overlapping Elements
Wenn Elemente positioniert sind, können sie andere Elemente überlappen.
Die z-index - Eigenschaft gibt den Stapel , um ein Element (das Element sollte von oder hinter vorne platziert werden, die anderen).
Ein Element kann eine positive oder negative Stapel Ordnung haben:
Dies ist eine Überschrift
Weil das Bild eine z-Index von -1 hat, wird es hinter dem Text platziert werden.
Ein Element mit größerer Stapel ist, um immer vor einem Element mit einer unteren Stapel Reihenfolge.
 | Hinweis: Wenn zwei positionierte Elemente ohne überlappen z-index angegeben, das Element positioniert zuletzt im HTML - Code wird gezeigt , an der Spitze. |
|---|
Positionieren von Text in einem Bild
Wie Text über ein Bild zu positionieren:
Beispiel
Versuch es selber:
Oben links » Oben Rechts» Unten links » Unten rechts» Zentriert »
Mehr Beispiele
Eingestellt , die Form eines Elements
Dieses Beispiel zeigt, wie die Form eines Elements einzustellen. Das Element wird in dieser Form geschnitten, und angezeigt.
Wie um zu zeigen , Überlauf in einem Element mit blättern
Dieses Beispiel zeigt, wie Sie die Überlauf-Eigenschaft festlegen eine Bildlaufleiste zu erstellen, wenn der Inhalt eines Elements zu groß ist, einen bestimmten Bereich zu passen.
Wie der Browser so einstellen , dass Überlauf behandeln
Dieses Beispiel zeigt, wie Sie den Browser so einstellen, dass Überlauf behandeln.
Ändern Sie den Cursor
Dieses Beispiel zeigt, wie Sie den Cursor zu ändern.
Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 »
Alle CSS Positioniereigenschaften
| Eigentum | Beschreibung |
|---|---|
| bottom | Legt die untere Randkante für eine positionierte Box |
| clip | Clips ein absolut positioniertes Element |
| cursor | Gibt den Typ der Cursor angezeigt werden |
| left | Legt den linken Rand Rand für eine positionierte Box |
| overflow | Gibt an, was geschieht, wenn der Inhalt ist ein Element-Box überläuft |
| overflow-x | Gibt an, was mit der linken / rechten Kanten des Inhalts zu tun, wenn sie den Inhalt des Elements Bereich überläuft |
| overflow-y | Gibt an, was mit den oberen / unteren Kanten des Inhalts zu tun, wenn sie den Inhalt des Elements Bereich überläuft |
| position | Gibt die Art der Positionierung für ein Element |
| right | Legt den rechten Rand Rand für eine positionierte Box |
| top | Legt den oberen Randkante für eine positionierte Box |
| z-index | Legt den Stapel Ordnung eines Elementes |