Kann ein fest positioniertes Element relativ zu seinem relativ positionierten übergeordneten Element sein?

Kann ein Element relativ zu seinem übergeordneten Element fest positioniert werden, wenn das übergeordnete Element relativ positioniert ist?

Einführung

Diese Frage wirft einen interessanten Punkt zum Zusammenspiel zwischen der festen und relativen Positionierung auf Methoden.

Feste Positionierung relativ zum übergeordneten Element

Nein, die feste Positionierung eines Elements relativ zu seinem übergeordneten Element ist nicht möglich, selbst wenn das übergeordnete Element relativ positioniert ist. Wenn ein Element auf „Fest“ eingestellt ist, wird es relativ zum Browserfenster positioniert, unabhängig von der Positionierung des übergeordneten Elements.

Feste Positionierung relativ zum Fenster

Sie können dies jedoch tun Positionieren Sie ein Element relativ zum Browserfenster mit der folgenden Syntax:

#element {
  position: fixed;
  left: 50px;  // Horizontal position
  top: 50px;   // Vertical position
}

In diesem Beispiel wird das Element #element 50 Pixel vom entfernt positioniert linker Rand und 50 Pixel vom oberen Rand des Browserfensters.

Beispiel

Betrachten Sie den folgenden HTML- und CSS-Code:

<div>

#wrapper {
  position: relative;
  width: 300px;
  background-color: orange;
  margin: 0 auto;
}

#feedback {
  position: fixed;
  right: 0;
  top: 120px;
}

Obwohl in diesem Beispiel das übergeordnete Div (#wrapper) relativ positioniert ist, ist der untergeordnete Link (#feedback) relativ zum Browser fest positioniert Fenster. Daher wird der Link unabhängig von der Positionierung des übergeordneten Elements bei 0 Pixel vom rechten Rand und 120 Pixel vom oberen Rand des Browserfensters positioniert.

Das obige ist der detaillierte Inhalt vonKann ein fest positioniertes Element relativ zu seinem relativ positionierten übergeordneten Element sein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!