Was sind die Unterschiede zwischen relativer Positionierung und absoluter Positionierung?

Die Unterschiede sind: 1. Positionierungsbasis, relativ positionierte Elemente werden relativ zu ihrer ursprünglichen Position positioniert, und absolut positionierte Elemente werden relativ zu ihrem nächstgelegenen übergeordneten Element positioniert. 2. Ränder und Polsterung, die Ränder und Polsterung von Elementen Es wird so sein wirken sich auf relativ positionierte Elemente aus, und die Ränder und Auffüllungen von Elementen wirken sich nicht auf absolut positionierte Elemente aus. 3. Der Z-Index eines Elements wirkt sich nicht auf relativ positionierte Elemente aus, der Z-Index eines Elements wirkt sich jedoch auf absolut positionierte Elemente aus.

Das Betriebssystem dieses Tutorials: Windows 10-System, Dell G3-Computer.

Relative Positionierung und absolute Positionierung sind beide Positionierungsmethoden in CSS und beide ermöglichen es Ihnen, ein Element von seiner Standardposition an eine andere Position zu verschieben. Es gibt jedoch einige wesentliche Unterschiede zwischen ihnen:

Relative Positionierung

* Ein relativ positioniertes Element wird relativ zu seiner ursprünglichen Position positioniert.

* Elementränder und -abstände wirken sich auf relativ positionierte Elemente aus.

* Der Z-Index eines Elements hat keinen Einfluss auf relativ positionierte Elemente.

Absolute Positionierung

* Ein absolut positioniertes Element wird relativ zu seinem am nächsten positionierten übergeordneten Element positioniert.

* Elementränder und -abstände haben keinen Einfluss auf absolut positionierte Elemente.

* Der Z-Index eines Elements wirkt sich auf absolut positionierte Elemente aus.

Im Folgenden sind die spezifischen Unterschiede zwischen relativer Positionierung und absoluter Positionierung aufgeführt:

Beispiel für eine absolute Positionierung

Eigenschaften	Relative Positionierung	Absolute Positionierung
Positionierungsbasis	Die ursprüngliche Position des Elements	Das am nächsten positionierte übergeordnete Element des Elements
Ränder und Polsterung	beeinflussen die Position der Elemente	hat keinen Einfluss auf die Position des Elements
z Index	hat keinen Einfluss auf die Position des Elements	hat keinen Einfluss auf die Position des Elements
Die Größe des Elements	hat keinen Einfluss auf die Position von Das Element hat Einfluss auf die Position des Elements
Der Schatten des Elements	hat keinen Einfluss auf die Position des Elements.	wirkt sich jedoch auf die Position des Elements aus. Das relativ positionierte Element wird um 100 Pixel nach rechts verschoben.

<div class="container">
  <div class="box">
    <p>这是一个相对定位的元素。它相对于其原始位置向右移动了 100 像素。</p>
  </div>
</div>

.container {
  width: 1000px;
  height: 100px;
}
.box {
  width: 200px;
  height: 50px;
  background-color: red;
  position: relative;
  left: 100px;
}

Dieser Code erstellt einen Container, der ein absolut positioniertes Element enthält. Absolut positionierte Elemente werden um 100 Pixel nach unten verschoben. Bei der tatsächlichen Verwendung können Sie je nach Bedarf zwischen relativer oder absoluter Positionierung wählen. Die relative Positionierung ist eine gute Wahl, wenn Sie ein Element lediglich von seiner Standardposition an eine andere Position verschieben müssen. Wenn Sie ein Element an einer bestimmten Stelle positionieren müssen, ist die absolute Positionierung die bessere Option.

Das obige ist der detaillierte Inhalt vonWas sind die Unterschiede zwischen relativer Positionierung und absoluter Positionierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!