absolute vs fixed

最新推荐文章于 2025-05-17 12:15:00 发布

weixin_33955681

最新推荐文章于 2025-05-17 12:15:00 发布

阅读量65

点赞数

本文通过实例演示了CSS中absolute和fixed两种定位方式的区别。absolute元素相对于最近的非static定位祖先元素进行定位，而fixed元素相对于浏览器窗口进行定位，无论页面如何滚动，位置保持不变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>absolute和fixed的区别</title>
 5 <style type="text/css">
 6 body{color:#fff;}
 7 #html{ position:relative;width:778px; height:1000px; border:1px solid #0000FF;}
 8 #fixed,#absolute{width:200px; height:200px; background:#FF0000;}
 9 #fixed{position:fixed; top:50px; left:50px;}
10 #absolute{position:absolute; top:50px; left:450px;}
11 </style>
12 </head>
13 <body>
14 <div id="fixed">我在屏幕的位置不会改变</div>
15 <div id="html">
16 <div id="absolute">我会随屏幕滚动</div>
17 </div>
18 </body>
19 </html>