Heim > Artikel > Web-Frontend > So ändern Sie die Position von div mit CSS
Sie können Position in CSS verwenden, um das Div zu positionieren und die Position des Div zu ändern. Die Bedeutung des Positionsattributwerts:
statisch: Das Elementfeld wird normal generiert. Elemente auf Blockebene erstellen ein rechteckiges Feld als Teil des Dokumentflusses, während Inline-Elemente ein oder mehrere Zeilenfelder erstellen, die innerhalb ihres übergeordneten Elements platziert werden.
relativ: Die Elementbox ist um einen bestimmten Abstand versetzt. Das Element behält seine unpositionierte Form und den Platz, den es ursprünglich einnahm.
absolut: Die -Elementbox wird vollständig aus dem Dokumentfluss entfernt und relativ zu ihrem enthaltenden Block positioniert. Der umschließende Block kann ein anderes Element im Dokument oder der anfängliche umschließende Block sein. Der zuvor vom Element im normalen Dokumentenfluss belegte Platz wird geschlossen, als ob das Element nicht vorhanden wäre. Das Element generiert nach der Positionierung eine Box auf Blockebene, unabhängig davon, welche Art von Box es ursprünglich im normalen Ablauf generiert hat.
behoben: Das -Elementfeld verhält sich so, als würde man die Position auf „absolut“ setzen, mit der Ausnahme, dass sein enthaltender Block das Ansichtsfenster selbst ist.
Tipp: Die relative Positionierung wird eigentlich als Teil des normalen Flusspositionierungsmodells betrachtet, da die Position eines Elements relativ zu seiner Position im normalen Fluss ist.
Experimenteller Fall:
1. Passen Sie die Position eines Div an, indem Sie den Positionswert eines Div festlegen Wie folgt:
body> <div id="div2"></div> <style> div{ border: 1px solid red; width: 200px; height: 200px; position: absolute; right: 200px; bottom: 200px; } </style> </body>
2. Legen Sie ein Div mit einer Breite und Höhe von 200 Pixeln fest, 200 Pixel von der rechten Seite des Körpers und 200 Pixel von der Unterseite.
Das obige ist der detaillierte Inhalt vonSo ändern Sie die Position von div mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!