Wie positioniere ich ein Element relativ zu seinem übergeordneten Element oder dem Browserfenster fest?

Elemente positionieren: Fest relativ zum übergeordneten Element oder Fenster

Ihre Frage konzentriert sich auf die Positionierung eines Elements „fest“ relativ zu seinem übergeordneten Element mithilfe von CSS. Wenn ein Element fest positioniert ist, wird seine Position relativ zum Ansichtsfenster bestimmt, nicht sein übergeordnetes Element.

Ein Element relativ zum übergeordneten Element fest positionieren

Wenn Sie möchten Um ein Element relativ zu seinem übergeordneten Element fest zu positionieren, können Sie die folgenden CSS-Eigenschaften verwenden:

#parent {
  position: relative;
}

#child {
  position: absolute;
  top: 50px;
  left: 50px;
}

Dadurch wird das #child-Element 50 Pixel nach unten und 50 positioniert Pixel rechts von seinem übergeordneten Element, #parent.

Ein Element relativ zum Fenster fest positionieren

Um ein Element relativ zum Fenster fest zu positionieren, können Sie die verwenden Folgende CSS-Eigenschaften:

#element {
  position: fixed;
  top: 50px;
  right: 50px;
}

Dadurch wird das #element-Element 50 Pixel unten vom oberen Rand und 50 Pixel vom rechten Rand des Browsers positioniert Fenster.

Beispiel

Betrachten Sie das folgende Beispiel:

<div>

#parent {
  width: 300px;
  background: orange;
  margin: 0 auto;
  position: relative;
}

#child {
  position: absolute;
  right: 0;
  top: 120px;
}

In diesem Beispiel ist das #child-Element fest relativ positioniert zu seinem übergeordneten Element, #parent. Es bewegt sich beim vertikalen Scrollen mit dem übergeordneten Element, bleibt jedoch 0 Pixel rechts und 120 Pixel unterhalb der Oberkante des übergeordneten Elements.

Das obige ist der detaillierte Inhalt vonWie positioniere ich ein Element relativ zu seinem übergeordneten Element oder dem Browserfenster fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!