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.
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.
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!
