CSS 固定定位 position fixed

最新推荐文章于 2025-06-07 20:47:06 发布

原创最新推荐文章于 2025-06-07 20:47:06 发布 · 6.7w 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #POSITION #FIXED

本文详细介绍了CSS中的固定定位，包括其基本概念、如何使用及坐标系的变化方式，并提供了多个示例帮助理解。

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

简单描述：固定定位是将某个元素固定在浏览器的某个确定的位置，不随滚动条的移动而变化；

注意：固定定位的位置是相对当前浏览器窗口的；

代码示例：

1.我们先在页面中输出一个标准情况下的 div 元素，不添加定位；

代码：

<!doctype html>
<html>
     <head>
          <meta charset="utf-8">
          <title></title>
          <style>
              *{margin:0;padding:0;}
             .abc{width:200px; height:200px; background-color:red; border:2px solid yellow;}
          </style>
     </head>
     <body>
            <div class="abc"></div>
     </body>
</html>

显示如下：

2. 然后给 div 元素添加固定定位：设置 position:fixed; left:100px; top:100px;

代码：

<!doctype html>
<html>
     <head>
          <meta charset="utf-8">
          <title></title>
          <style>
              *{margin:0;padding:0;}
             .abc{width:200px; height:200px; background-color:red; border:2px solid yellow;
             position:fixed; left:100px; top:100px;}
          </style>
     </head>
     <body>
            <div class="abc"></div>
     </body>
</html>

显示：