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

Distinguish between sticky positioning and fixed positioning

王林

Release： 2024-02-18 22:42:22

Original

618 people have browsed it

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>

Copy after login

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>

Copy after login

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!