Heim >Web-Frontend >CSS-Tutorial >So verwenden Sie die Position in CSS
Das Positionsattribut in CSS wird verwendet, um die Position von Elementen im Dokumentenfluss zu definieren. Die möglichen Werte sind: statisch (Standard): Elemente werden in normaler Reihenfolge im Dokumentenfluss angeordnet. relativ: Verschiebt ein Element um eine bestimmte Distanz relativ zu seiner ursprünglichen Position, bleibt aber dennoch im Dokumentfluss. absolut: Entfernt ein Element aus dem Dokumentfluss und positioniert es relativ zu seinem übergeordneten oder Stammelement. behoben: Das Element im Browser-Ansichtsfenster wurde korrigiert, sodass es sich nicht bewegt, auch wenn die Seite gescrollt wird.
Verwendung von Position in CSS
Die Positionseigenschaft definiert die Position eines Elements innerhalb des HTML-Dokumentflusses und umgebender Elemente. Es kann angeben, ob das Element statisch, relativ, absolut oder fest ist.
1. statisch (Standard)
Statische Positionierung ist die Standardpositionierung und das Element nimmt normalen Platz im Dokumentenfluss ein.
2. Relative
Relative Positionierung verschiebt ein Element um einen bestimmten Abstand von seiner normalen Position, ohne es aus dem Fluss des Dokuments zu entfernen.
3. Absolute
Absolute Positionierung entfernt ein Element aus dem Dokumentenfluss und positioniert es basierend auf seinem übergeordneten oder Stammelement.
4. Festgelegt
Die feste Positionierung fixiert das Element im Browser-Ansichtsfenster und verschiebt sich nicht, selbst wenn die Seite gescrollt wird.
Verwendung
Die Syntax des Positionsattributs lautet wie folgt:
<code class="css">position: value;</code>
Wobei der Wert einer der folgenden Werte sein kann:
Beispiel
Beispiel unten Positionieren Sie ein div-Element relativ und verschieben Sie es um 10 Pixel nach rechts:
<code class="css">div { position: relative; right: 10px; }</code>
Das folgende Beispiel positioniert ein div-Element absolut in der unteren rechten Ecke der Seite:
<code class="css">div { position: absolute; bottom: 0; right: 0; }</code>
Hinweis:
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Position in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!