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:

• statisch
• relativ
• absolut
• fest

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:

• Nur Elemente mit Positionierungsattribute können linke, rechte, obere und untere Attribute festlegen.
• Relativ positionierte Elemente belegen Platz im Dokumentenfluss, absolut positionierte Elemente hingegen nicht.
• Fest positionierte Elemente verschieben sich beim Scrollen der Seite nicht, wirken sich jedoch auf die Positionierung anderer Elemente aus.

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!