Home >Web Front-end >CSS Tutorial >How to implement fixed positioning in css? (code example)
This chapter uses examples to introduce how to achieve fixed positioning in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Set box2 to fixed positioning:
<!DOCTYPE html> <html dir="ltr"> <head> <meta charset="utf-8"> <title>定位</title> <style media="screen"> .box1{ width:100px; height: 100px; background-color: rgb(184, 208, 162); } .box2{ width:100px; height: 100px; background-color: rgb(231, 223, 143); position:fixed; left: 100px; top: 100px; } .box3{ width:100px; height: 100px; background-color: rgb(188, 211, 213); } span{ background-color: rgb(209, 198, 209); } </style> </head> <body> <div> <div> </div> <div> <div> </div> </div> <span>span元素</span> </div> </body> </html>
Output:
Fixed positioning will always be positioned relative to the browser window;
Fixed positioning will be fixed At a certain position in the browser window, it will not scroll with the scroll bar;
The above is the detailed content of How to implement fixed positioning in css? (code example). For more information, please follow other related articles on the PHP Chinese website!