Home >Web Front-end >HTML Tutorial >What is the difference between sticky positioning and fixed positioning?
What is the difference between sticky positioning and fixed positioning?
- 王林Original
- 2024-02-18 16:04:06690browse
Sticky positioning and fixed positioning are two common positioning methods in Web development. They have certain differences in achieving the positioning effect of elements. This article will explain in detail the difference between sticky positioning and fixed positioning, with specific code examples.
1. Sticky positioning
Sticky positioning (sticky positioning) was introduced in CSS3. When the element scrolls to a specific position, the element can be fixed at a specified position on the screen. When the page scrolls beyond a specific position, , the element returns to its normal flow position. Compared with other positioning methods, sticky positioning is more flexible and convenient, and can be applied to various scenarios.
When specifically using sticky positioning, you need to specify the position attribute of the element to sticky, and pass top, bottom , left or right to determine the sticky positioning offset value of the element.
The following is a specific code example:
<!DOCTYPE html>
<html>
<head>
<style>
.header {
position: sticky;
top: 0;
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
.content {
height: 2000px;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>这是一个粘性定位的标题</h1>
</div>
<div class="content">
<h2>这是页面内容</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
</body>
</html>In the above code, the .header element is set to sticky positioning and passed top: 0; Pin it to the top of the screen. When the page scrolls to a certain position, the .header element will remain at the top of the screen.
2. Fixed positioning
Fixed positioning (fixed positioning) is a positioning method in CSS that is used to position elements relative to the browser window. Fixed-positioned elements will always stay at the specified position during page scrolling and will not change with scrolling.
When using fixed positioning specifically, you need to specify the position attribute of the element as fixed, and pass top, bottom , left or right to determine the position value of the element relative to the browser window.
The following is a specific code example:
<!DOCTYPE html>
<html>
<head>
<style>
.fixed {
position: fixed;
bottom: 0;
right: 0;
background-color: #f1f1f1;
padding: 10px;
}
.content {
height: 2000px;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="fixed">
<h2>这是一个固定定位的元素</h2>
<p>该元素将一直停留在浏览器窗口的右下角。</p>
</div>
<div class="content">
<h2>这是页面内容</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
</body>
</html>In the above code, the .fixed element is set to fixed positioning and passed bottom: 0; and right: 0; pin it to the lower right corner of the browser window.
3. Difference comparison
- Both sticky positioning and fixed positioning can achieve the fixed effect of elements, but there are some differences in specific applications.
- Sticky positioned elements will stay "sticky" at a specific position. When the page scrolls beyond a specific position, the element will return to its normal flowing position. Fixed-positioned elements always stay at the specified position and do not change as the page scrolls.
- Specific positions for sticky positioning can be specified via
top,bottom,left, orright, while for fixed positioning The position value can only be determined bytop,bottom,left, orrightto determine the element's position relative to the browser window. - Sticky positioning is more flexible than fixed positioning and can be applied to various scenarios. However, there are certain issues with the compatibility of sticky positioning on older browsers, and you need to pay attention to compatibility.
The above is the difference between sticky positioning and fixed positioning, as well as the accompanying specific code examples. Through these examples, you can better understand and master the use of these two positioning methods.
The above is the detailed content of What is the difference between sticky positioning and fixed positioning?. For more information, please follow other related articles on the PHP Chinese website!