Wann sollte ich Position:Sticky vs. Position:Fixed verwenden?

Den Unterschied zwischen position:sticky und position:fixed enthüllen

Das Verständnis der Nuancen zwischen CSS-Positionierungseigenschaften kann für Anfänger verwirrend sein. Dieser Artikel befasst sich mit den subtilen Unterschieden zwischen position:sticky und position:fixed und erläutert deren unterschiedliche Funktionen zur Verbesserung Ihrer CSS-Fähigkeiten.

position:fixed vs. position:sticky

position:fixed

• Sperrt ein Element an einer bestimmten Position innerhalb seines Containers oder des Ansichtsfensters.
• Bleibt unabhängig vom Scrollen des Containers fixiert.

position:sticky

• Verhält sich zunächst wie position:relative, was keinen Einfluss auf den Elementfluss hat.
• Beim Scrollen über einen angegebenen Offset hinaus , wechselt zu position:fixed und „hält“ das Element an seiner Position.
• Kehrt zu position:relative zurück, wenn in Richtung seiner ursprünglichen Position zurückgescrollt wird.

Beispiel

Berücksichtigen Sie das folgende HTML und CSS:

<code class="html"><div class="container">
  <div class="sticky-element">Sticky Element</div>
  <div class="fixed-element">Fixed Element</div>
</div></code>

<code class="css">.container {
  height: 100vh; /* Set the container to full viewport height */
  overflow-y: scroll; /* Enable vertical scrolling within the container */
}

.sticky-element {
  position: sticky;
  top: 10px; /* Specifies the offset from the top before stickiness applies */
  width: 200px;
  height: 200px;
  background-color: blue;
}

.fixed-element {
  position: fixed;
  top: 0; /* Sets the fixed position from the top of the viewport */
  width: 200px;
  height: 200px;
  background-color: red;
}</code>

Verhalten:

Beim Scrollen bleibt das Sticky-Element an Ort und Stelle, bis Es erreicht den oberen Rand des Ansichtsfensters und bleibt dort wie ein festes Element oben hängen. Das feste Element hingegen bleibt unabhängig vom Scrollen des Containers an seiner Ausgangsposition geklebt.

Das obige ist der detaillierte Inhalt vonWann sollte ich Position:Sticky vs. Position:Fixed verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!