Heim >Web-Frontend >CSS-Tutorial >Unterscheiden Sie zwischen klebriger Positionierung und fester Positionierung

Unterscheiden Sie zwischen klebriger Positionierung und fester Positionierung

王林Original: 2024-02-18 22:42:22648Durchsuche

Sticky Positioning und Fixed Positioning sind zwei Positionierungsmethoden, die häufig im Webdesign und in der Webentwicklung verwendet werden. Beide ermöglichen die Fixierung eines Elements an einer bestimmten Stelle auf der Seite, jedoch auf unterschiedliche Weise. In diesem Artikel wird der Unterschied zwischen Sticky-Positionierung und fester Positionierung ausführlich erläutert und spezifische Codebeispiele bereitgestellt, um den Lesern ein besseres Verständnis zu erleichtern.

Sticky-Positionierung:
Sticky-Positionierung bedeutet, dass das Element beim Scrollen an einer bestimmten Position auf der Seite fixiert werden kann. Wenn die Bildlaufposition die angegebene Position erreicht, stoppt das Element den Scrollvorgang und wird auf der Seite fixiert. Die Sticky-Positionierung erfolgt relativ zum Dokumentfluss. Bei einem normalen Dokumentfluss-Layout ändert sich die Position des Elements beim Scrollen. Bei der Sticky-Positionierung wird die Position eines Elements durch Attribute wie oben, unten, links und rechts bestimmt.

Das Folgende ist ein einfacher Beispielcode, der den Effekt implementiert, dass eine Navigationsleiste oben auf der Seite fixiert wird, wenn zum Seitenanfang gescrollt wird:

<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
  position: sticky;
  top: 0;
  background-color: #f1f1f1;
  padding: 10px 0;
  text-align: center;
}
</style>
</head>
<body>

<div class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>

<div style="height:500px">
  <p>Scroll down to see the effect</p>
</div>

</body>
</html>

Im obigen Code durch Festlegen des Positionsattributs von navbar auf sticky und set top Es ist 0, wodurch erreicht wird, dass die Navigationsleiste beim Scrollen oben auf der Seite fixiert wird.

Feste Positionierung:
Feste Positionierung bedeutet, dass das Element an einer bestimmten Position relativ zum Browserfenster fixiert ist und sich die Position des Elements nicht ändert, unabhängig davon, ob es gescrollt wird oder nicht. Bei der festen Positionierung wird die Position des Elements durch Attribute wie oben, unten, links und rechts bestimmt.

Das Folgende ist ein einfacher Beispielcode, der den Effekt einer schwebenden Schaltfläche mit einer festen Position in der unteren rechten Ecke der Seite implementiert:

<!DOCTYPE html>
<html>
<head>
<style>
.float-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #f44336;
  color: white;
  padding: 16px;
  border-radius: 50%;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
}
</style>
</head>
<body>

<div class="float-button">+</div>

</body>
</html>

Setzen Sie im obigen Code das Positionsattribut von float-button auf „fixed and“. Stellen Sie unten 20 Pixel und rechts 20 Pixel ein, um den Effekt zu erzielen, dass die schwebende Schaltfläche in der unteren rechten Ecke der Seite fixiert wird.

Zusammenfassung:
Sowohl die klebrige Positionierung als auch die feste Positionierung können den festen Effekt von Elementen erzielen, die Methoden und Effekte sind jedoch unterschiedlich. Die feste Positionierung ist eine Positionierungsmethode relativ zum Dokumentfluss. Beim Scrollen zu einer bestimmten Position wird das Element auf der Seite fixiert. Die feste Positionierung ist eine Positionierungsmethode relativ zum Browserfenster gescrollt wird oder nicht. Je nach Bedarf können Sie eine geeignete Positionierungsmethode auswählen.

Das obige ist der detaillierte Inhalt vonUnterscheiden Sie zwischen klebriger Positionierung und fester Positionierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Float position

Stellungnahme：

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

Vorheriger Artikel：Analysieren Sie die Vorteile eines responsiven Layouts bei der Verbesserung der BenutzererfahrungNächster Artikel：Analysieren Sie die Vorteile eines responsiven Layouts bei der Verbesserung der Benutzererfahrung

In Verbindung stehende Artikel

Mehr sehen