So verwenden Sie den Sticky in Position

Schritte zur Verwendung von Sticky in Position: 1. Fügen Sie dem Element das Attribut „position: sticky“ hinzu. 2. Geben Sie die Positionierung des Elements relativ zu seinem nächsten Vorgängerelement mit einem Bildlauffeld an. Verwenden Sie die Attribute „unten“ oder „links“, um den Versatzwert festzulegen.

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

position: sticky ist eine Positionierungseigenschaft in CSS, die es Elementen ermöglicht, beim Scrollen an einer bestimmten Position zu bleiben. Wenn ein Element bis zu einem angegebenen Versatz gescrollt wird, wird es „klebrig positioniert“ und bleibt an dieser Position, bis es zu einem anderen angegebenen Versatz gescrollt wird.

Um position: sticky zu verwenden, sind die folgenden Schritte erforderlich:

1. Fügen Sie dem Element das Attribut position: sticky hinzu.

2. Um das angegebene Element relativ zu seinem nächstgelegenen Vorgängerelement mit einem Bildlauffeld zu positionieren, können Sie den Versatzwert mithilfe der Attribute „oben“, „rechts“, „unten“ oder „links“ festlegen.

Hier ist zum Beispiel ein Beispiel mit position: sticky:

.container {
  height: 400px;
  overflow: auto;
}
.sticky-element {
  position: sticky;
  top: 20px;
  background-color: #f1f1f1;
  padding: 10px;
}

<div class="container">
  <div class="sticky-element">
    这是一个粘性元素
  </div>
  <!-- 其他内容 -->
</div>

Im obigen Beispiel bleibt das .sticky-element-Element an dieser Position, wenn es bis zu einem Abstand von 20 Pixel vom oberen Rand des .container-Elements gescrollt wird.

Bitte beachten Sie, dass das Attribut „position: sticky“ in einigen älteren Browserversionen möglicherweise nicht unterstützt wird. Daher ist bei der Verwendung ein Kompatibilitätstest erforderlich.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Sticky in Position. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!