CSS Absolut Position
- Vorherige Seite CSS Relativ Position
- Nächste Seite CSS Float
Der Rahmen eines Elements, das auf absolute Positionierung gesetzt ist, wird vollständig aus dem Dokumentfluss entfernt und relativ zu seinem Enthältungsrahmen positioniert, der möglicherweise ein anderes Element im Dokument oder der ursprüngliche Enthältungsrahmen sein kann. Der originally von dem Element einnahmende Raum wird geschlossen, als ob das Element ursprünglich nicht existiert hätte. Nach der Positionierung wird ein blockartiger Rahmen erzeugt, unabhängig davon, welchen Typ des Rahmens das Element ursprünglich im normalen Fluss erzeugt hat.
CSS Absolut Position
Absolute Positionierung macht die Position eines Elements unabhängig vom Dokumentfluss, sodass es keinen Raum einnimmt. Dies unterscheidet sich von der relativen Positionierung, die tatsächlich als Teil des Modells der normalen Flussposition angesehen wird, da die Position des Elements relativ zu seiner Position im normalen Fluss ist.
Die Anordnung anderer Elemente im Fluss ähnelt der eines nicht existierenden absolut positionierten Elements:
#box_relative {
position: absolute;
left: 30px;
top: 20px;
wie im folgenden Bild gezeigt:
Die Position der Elemente mit absoluter Positionierung ist relativ zudem nächsten positionierten Vorfahren, wenn das Element keine positionierten Vorfahren hat, dann ist seine Position relativ zuUrsprünglicher Envelope
Das Hauptproblem bei der Positionierung ist es zu beachten, was jeder Art der Positionierung bedeutet. Also, lassen Sie uns das Gelernte wiederholen: Relative Position ist "relativ" zur ursprünglichen Position des Elements im Dokument, während absolute Position "relativ" zur nächsten positionierten Vorfahren ist, wenn keine positionierten Vorfahren vorhanden sind, dann "relativ" zum ursprünglichen Envelope.
Kommentar:Je nach Benutzeragent, kann der ursprüngliche Envelope möglicherweise Canvas oder HTML-Element sein.
Hinweis:Da sich die Boxen mit absoluter Positionierung von der Dokumentstrom无关, können sie andere Elemente auf der Seite überdecken. Dies kann durch die Einstellung erreicht werden z-index Eigenschaftum die Stacking-Reihenfolge dieser Kästen zu kontrollieren.
CSS Absolute Positioning Example
- Position: Absolute Position
- Dieses Beispiel zeigt, wie man Elemente mit absoluten Werten positioniert.
- Vorherige Seite CSS Relativ Position
- Nächste Seite CSS Float
