Heim > Artikel > Web-Frontend > Einführung in die Verwendung der CSS-Positionierung
Die Option
Position definiert die Positionierung des Element--Attributs . Die Option hat 5 optionale Werte: statisch, relativ, absolut, fest, erben
Wenn der Attributwert relativ, absolut oder fest ist, links | unten >z-index wird funktionieren. statisch (Standard)
relativ (relative Positionierung)
absolut (absolute Positionierung )
relativ und statisch Sie sind alle relativ zu anderen Elementen des Dokuments positioniert und gehören zur Kategorie der relativen Positionierung. Der Unterschied besteht darin, dass eines die Verschiebung steuern kann und das andere nichtstatisch (Standardwert). )
Wennden Standardwert
verwendet, hat die Definition von oben, links, rechts, unten und dem Z-Index für das Element in CSS keine Wirkungrelative
Der Standardwert für die Positionierung (Position) aller Elemente ist statisch. Wenn Sie nichts schreiben, werden die oberen, linken, Z-Index-, rechten und unteren Werte nicht festgelegt . Das Verhalten ist das gleiche wie der Standardwert.
absolut und fest
Funktionen:
1. Die Breite von Elementen auf Blockebene beträgt nicht mehr 100 %, wenn sie nicht definiert ist wird automatisch entsprechend dem Inhalt angepasst2. Wenn der Z-Index nicht definiert ist, überdeckt das absolute Element andere Elemente.
3. Es bricht aus dem normalen Dokumentenfluss ab und belegt keinen Platz mehr, ähnlich dem Effekt nachFloating
absolut ist relativ zum vorherigen übergeordneten Element ist nicht statisch. Führen Sie eine absolute Positionierung durch. Wenn die Position des übergeordneten Elements nicht angegeben ist, wird absolute absolut relativ zum gesamtenHTML-Dokument
positioniert.Was tun, wenn ie6 und ie7 keine festen Attribute unterstützen?
LösungVerwenden Sie position:absolute_top:expression ( eval(document
.documentElement.scrollTop))Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung der CSS-Positionierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!