CSS Positionierung (Positionierung)
Positionierung manchmal sehr schwierig!
Entscheiden Sie vor den Elementen zu zeigen!
Die Elemente können sich überlappen!
Positionierung (Positionierung)
CSS-Positionierung Eigenschaften können Sie ein Element zu suchen. Es kann auch ein Element in ein anderes Element sein, hinter, und geben Sie ein Element Inhalt zu groß ist, was passieren soll.
Die Elemente können an der Spitze verwendet werden, unten, links und rechts Positionierung Attribute. Allerdings arbeiten diese Eigenschaften nicht, wenn die Eigenschaft Position zuerst gesetzt. Sie haben auch verschiedene Arbeitsweisen, abhängig von der Positionsbestimmungsverfahren.
Es gibt vier verschiedene Positionierungsmethoden.
Statische Positionierung
Standard-HTML-Elemente, die nicht entfernt wird, werden die Elemente in der Normalstrom.
Statische Positionierungselemente nicht oben, unten, links, rechts Einfluss sein.
Feste Positionierung
Position des Elements relativ zu dem Browser-Fenster ist eine feste Position.
Selbst wenn das Fenster, um es rollt sich nicht bewegt:
Hinweis: Feste Positionierung in IE7 und IE8 Beschreibung DOCTYPE brauchen Unterstützung!
Feste Positionierung der Position der Dokumentelemente unabhängig von Strömungs und daher keinen Platz einnimmt.
Fest positionierte Elemente und andere Elemente überlappen.
Relative Positionierung
Relativpositionierungselement relativ zu seiner normalen Position positioniert.
Beispiele
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
Versuchen »
Kann die relative Positionierung von Inhaltselementen und überlappende Elemente bewegt werden, ist es nicht die ursprüngliche Raum besetzt ändern.
Relative Positionierung Element wird häufig als Behälter Block absolut positionierten Elemente verwendet.
Absolute Positionierung
Position absolute Positionierung von Elementen in Bezug auf die nächste positionierter Elternelement, wenn das Element nicht bereits positioniert übergeordnete Element, seine Position in Bezug auf die <html>:
Absolut positioniert, so dass die Position der Dokumentelemente unabhängig von Strömungs und daher keinen Platz einnimmt.
Absolut positionierte Elemente und andere Elemente überlappen.
Overlapping Elemente
Orientierung und fließen unabhängig von Dokumentelementen, so können sie andere Elemente auf der Seite abdecken
z-index-Attribut gibt die Stapelreihenfolge eines Elements (das Element sollte vor oder hinter platziert werden)
Element kann eine positive oder negative Stapelreihenfolge:
Element hat eine höhere Stapelreihenfolge ist immer vor dem unteren Stapelreihenfolge der Elemente.
Hinweis: Wenn zwei positionierte Elemente überlappen, nicht angeben , die z - Index, die endgültige Positionierung der Elemente im HTML - Code wird oben angezeigt.
Weitere Beispiele
Dieses Beispiel zeigt, wie die Form des Elements einzustellen. Das Element wird in dieser Form geschnitten, und angezeigt.
Wie die Bildlaufleiste zu verwenden , um den Inhalt des inneren Elements Überlauf anzuzeigen
Dieses Beispiel zeigt die Überlauf-Eigenschaft eine Bildlaufleiste zu erstellen, wenn der Inhalt eines Elements in dem bezeichneten Gebiet zu groß ist, wie zur Aufnahme einzurichten.
Wie der Browser so einstellen , dass Überlauf behandeln
Dieses Beispiel zeigt, wie Sie den Browser so einstellen, dass Überlauf behandeln.
Dieses Beispiel zeigt, wie Sie den Cursor zu ändern.
Alle CSS-Positionierung Eigenschaften
"CSS" Spalte zeigt die Anzahl, welche CSS (CSS1 oder CSS2) Version der Definition der Immobilie.
| Immobilien | Erklärung | Wert | CSS |
|---|---|---|---|
| Boden | Offset definiert die Grenze zwischen dem unteren Positionierungselement außerhalb des umschließenden Blocks von der Grenze unter. | auto Länge % erben | 2 |
| Klammer | Clips ein absolut positionierte Elemente | Form auto erben | 2 |
| Cursor | Bewegen Sie den Cursor des angegebenen Typs anzuzeigen | url auto Fadenkreuz Default Zeiger Umzug E-Resize ne-resize nw-resize n-Resize se-resize sw-resize s-Resize w-resize Text warten Hilfe | 2 |
| links | Definiert die Targeting-Elemente linken Rand versetzt Blockgrenze zwischen dem linken Rand seiner enthält. | auto Länge % erben | 2 |
| Überlauf | Wenn der Inhalt des Elements festgelegt, was, wenn seine Region überschwemmt passiert. | auto versteckt blättern sichtbar erben | 2 |
| Überlauf-y | Gibt an, wie der Inhalt des oberen / unteren Rand des Überströmelement Inhaltsbereich zu handhaben | auto versteckt blättern sichtbar no-Anzeige no-Gehalt | 2 |
| Überlauf-x | Gibt an, wie auf der rechten Seite / linken Rand des Inhaltsbereichs des Elementinhalt Überlauf zu handhaben | auto versteckt blättern sichtbar no-Anzeige no-Gehalt | 2 |
| Position | Geben Sie die Art der Positionierungselemente | absolute fest relativ statisch erben | 2 |
| Recht | Es definiert die Zielelementen, die Grenze und rechten Rand zwischen dem Block rechten Rand versetzt. | auto Länge % erben | 2 |
| Top | Es definiert ein Positionierungselement an der Grenze und die Marge auf den Block enthält zwischen den Grenzen der Offset. | auto Länge % erben | 2 |
| z-index | Einstellen der Stapelreihenfolge der Elemente | Anzahl auto erben | 2 |