Distinguish between sticky positioning and fixed positioning-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Distinguish between sticky positioning and fixed positioning

王林

Feb 18, 2024 pm 10:42 PM

position attributeFixed positioningsticky positioning

Distinguish between sticky positioning and fixed positioning

Sticky positioning and fixed positioning are two positioning methods commonly used in web design and development. They both allow an element to be fixed at a certain location on the page, but in different ways. This article will introduce in detail the difference between sticky positioning and fixed positioning, and provide specific code examples to help readers better understand.

Sticky Positioning:
Sticky positioning means that the element can be fixed at a certain position on the page when scrolling. When the scroll position reaches the specified position, the element will stop scrolling. and pinned to the page. Sticky positioning is relative to the document flow. Under normal document flow layout, the position of the element will change with scrolling. In sticky positioning, the position of an element is determined by attributes such as top, bottom, left, and right.

The following is a simple sample code that implements the effect of a navigation bar fixed at the top of the page when scrolling to the top of the page:

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

In the above code, by setting The position attribute of navbar is sticky, and top is set to 0, which achieves the effect of the navigation bar being fixed at the top of the page as it scrolls.

Fixed Positioning:
Fixed positioning means that the element is fixed at a certain position relative to the browser window. The position of the element will not change whether it is scrolled or not. In fixed positioning, the position of the element is determined by attributes such as top, bottom, left, and right.

The following is a simple sample code that implements the effect of a floating button at a fixed position in the lower right corner of the page:

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

In the above code, by setting the float-button The position attribute is fixed, and the bottom is set to 20px and the right is 20px to achieve the effect of the floating button being fixed in the lower right corner of the page.

Summary:
Both sticky positioning and fixed positioning can achieve the fixed effect of elements, but the methods and effects are different. Sticky positioning is a positioning method relative to the document flow. When scrolling to a specified position, the element is fixed on the page; fixed positioning is a positioning method relative to the browser window. The element remains in a fixed position regardless of whether it is scrolled or not. According to specific needs, you can choose a suitable positioning method.

The above is the detailed content of Distinguish between sticky positioning and fixed positioning. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PM

CSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust

Modern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AM

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.

Revisiting Image MapsMay 07, 2025 am 09:40 AM

Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.

State of Devs: A Survey for Every DeveloperMay 07, 2025 am 09:30 AM

The State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more.

What is CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.

What is CSS flexbox?Apr 30, 2025 pm 03:20 PM

Article discusses CSS Flexbox, a layout method for efficient alignment and distribution of space in responsive designs. It explains Flexbox usage, compares it with CSS Grid, and details browser support.

See all articles