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