Heim > Web-Frontend > CSS-Tutorial > Wie unterscheiden sich „Position: absolut' und „Position: fest' bei der HTML/CSS-Positionierung?

Wie unterscheiden sich „Position: absolut' und „Position: fest' bei der HTML/CSS-Positionierung?

Susan Sarandon
Freigeben: 2024-11-29 05:30:09
Original
154 Leute haben es durchsucht

How Do `position: absolute` and `position: fixed` Differ in HTML/CSS Positioning?

Elemente relativ zum übergeordneten Element oder Fenster fest positionieren

In HTML und CSS gibt es zwei Hauptmethoden zum Positionieren von Elementen: relativ zum übergeordneten Element oder relativ zum Fenster.

Positionierungselement relativ zu fixiert Übergeordnetes Element

Um ein Element relativ zum übergeordneten Element fest zu positionieren, verwenden Sie die folgende CSS-Eigenschaft:

position: absolute;
Nach dem Login kopieren

Wenn ein Element absolut positioniert ist, wird seine Position relativ zum übergeordneten Element bestimmt unmittelbar enthaltendes übergeordnetes Element. Zum Beispiel:

#parent {
  position: relative;
}
#child {
  position: absolute;
  left: 50px;
  top: 20px;
}
Nach dem Login kopieren

In diesem Beispiel wird das untergeordnete Element 50 Pixel von links und 20 Pixel von der Oberseite des übergeordneten Elements positioniert.

Positionierungselement behoben Relativ zum Fenster

Um ein Element relativ zum Fenster fest zu positionieren, verwenden Sie das folgende CSS Eigenschaft:

position: fixed;
Nach dem Login kopieren

Wenn ein Element fest positioniert ist, wird seine Position relativ zum Ansichtsfenster bestimmt. Zum Beispiel:

#my-element {
  position: fixed;
  right: 0;
  top: 120px;
}
Nach dem Login kopieren

In diesem Beispiel wird das my-Element 120 Pixel vom oberen Rand und 0 Pixel von der rechten Seite des Ansichtsfensters positioniert.

Das obige ist der detaillierte Inhalt vonWie unterscheiden sich „Position: absolut' und „Position: fest' bei der HTML/CSS-Positionierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage