Beherrschen Sie die allgemeinen Attributwerte der absoluten Positionierung und lassen Sie Ihre Seitenelemente so platzieren, wie Sie möchten

Beherrschen Sie die allgemeinen Attributwerte der absoluten Positionierung und lassen Sie Ihre Seitenelemente nach Ihren Wünschen platzieren.

Absolute Positionierung (absolute Positionierung) ist eine der am häufigsten verwendeten Positionierungsmethoden in CSS . Es ermöglicht uns, Elemente relativ zu Positioned durch ihr nächstgelegenes übergeordnetes Element mit einem Positionierungsattribut zu positionieren. Durch die Beherrschung der allgemeinen Attributwerte der absoluten Positionierung können wir die Position und das Layout von Seitenelementen leicht steuern.

1. Grundkonzepte zur Positionierung von Elementen

Bevor wir die absolute Positionierung verwenden, müssen wir einige Grundkonzepte verstehen. Das übergeordnete Element bezieht sich auf das Vorgängerelement mit Positionierungsattributen, und das untergeordnete Element bezieht sich auf das Element, das positioniert werden muss. Bei Verwendung der absoluten Positionierung können wir die Position untergeordneter Elemente anpassen, indem wir Attributwerte wie oben, unten, links und rechts festlegen.

2. Allgemeine Attributwerte der absoluten Positionierung

Bei der absoluten Positionierung verwenden wir häufig die folgenden Attributwerte, um die Position und das Layout von Elementen zu steuern:

(1) Top-Attribut

Durch Festlegen des Top-Attributs Als Wert können wir das untergeordnete Element angeben. Der Abstand zwischen dem Element und der Oberseite seines übergeordneten Elements. Der Beispielcode lautet wie folgt:

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    top: 50px;   /* 子元素距离父元素顶部的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

(2) unteres Attribut

Durch Festlegen des unteren Attributwerts können wir den Abstand zwischen dem untergeordneten Element und der Unterseite des übergeordneten Elements angeben. Der Beispielcode lautet wie folgt:

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    bottom: 50px;   /* 子元素距离父元素底部的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

(3) linkes Attribut

Durch Festlegen des linken Attributwerts können wir den Abstand zwischen dem untergeordneten Element und der linken Seite des übergeordneten Elements angeben. Der Beispielcode lautet wie folgt:

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    left: 50px;   /* 子元素距离父元素左侧的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

(4) rechtes Attribut

Durch Festlegen des rechten Attributwerts können wir den Abstand zwischen dem untergeordneten Element und der rechten Seite des übergeordneten Elements angeben. Der Beispielcode lautet wie folgt:

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    right: 50px;   /* 子元素距离父元素右侧的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

3. Hinweise

Bei der Verwendung der absoluten Positionierung müssen wir auf die folgenden Punkte achten:

(1) Das übergeordnete Element muss das Positionierungsattribut festlegen

Wenn das übergeordnete Element Das Positionierungsattribut wird nicht festgelegt (Position: relativ/absolut/fest). Das untergeordnete Element kann nicht über die Attribute oben, unten, links und rechts positioniert werden.

(2) Die Breite und Höhe des untergeordneten Elements werden relativ zum übergeordneten Element festgelegt.

Bei der absoluten Positionierung werden Breite und Höhe des untergeordneten Elements normalerweise relativ zum übergeordneten Element festgelegt. Natürlich können wir auch Prozentsätze verwenden, um die Breite und Höhe festzulegen und diese entsprechend der Größe des übergeordneten Elements anzupassen.

(3) Überlappung von Elementpositionen

Wenn sich bei Verwendung der absoluten Positionierung die Positionen von Unterelementen überlappen, überdecken die späteren Unterelemente die früheren Unterelemente.

Fazit

Durch die Beherrschung der allgemeinen Attributwerte der absoluten Positionierung können wir die freie Platzierung von Seitenelementen problemlos realisieren. Bei der tatsächlichen Verwendung müssen wir jedoch darauf achten, die Positionierungsattribute von übergeordneten und untergeordneten Elementen sowie die Überlappung von Elementpositionen angemessen festzulegen, um die Schönheit und Lesbarkeit des Seitenlayouts sicherzustellen.

Das Obige ist eine Einführung in gängige Attributwerte zur Beherrschung der absoluten Positionierung. Ich hoffe, es wird für alle hilfreich sein. Ich glaube, dass der in der Praxis geschriebene Code Ihnen dabei helfen wird, diese Attributwerte besser zu verstehen und zu beherrschen, sodass Ihre Seitenelemente nach Ihren Wünschen platziert werden können.

Das obige ist der detaillierte Inhalt vonBeherrschen Sie die allgemeinen Attributwerte der absoluten Positionierung und lassen Sie Ihre Seitenelemente so platzieren, wie Sie möchten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!