CSS 固定定位 position fixed

最新推荐文章于 2024-03-09 16:15:33 发布

cvper

最新推荐文章于 2024-03-09 16:15:33 发布

阅读量6.6w

点赞数 8

文章标签： CSS POSITION FIXED

本文链接：https://blog.csdn.net/cvper/article/details/79190639

版权

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

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

代码示例：

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>

显示：

3.我们再次修改定位： position:fixed; right:100px; top:100px;

显示效果：

可以看出坐标系是不断变化的，

那么： left + top：相对于左上顶点进行位移

left+bottom：相对于左下顶点进行位移

right +top：相对于右上顶点进行位移

right +bottom：相对于右下顶点进行位移

cvper

关注

8
点赞
踩
27

收藏

觉得还不错? 一键收藏
1
评论
CSS 固定定位 position fixed

简单描述：固定定位是将某个元素固定在浏览器的某个确定的位置，不随滚动条的移动而变化；注意：固定定位的位置是相对当前浏览器窗口的；代码示例：1.我们先在页面中输出一个标准情况下的 div 元素，不添加定位；代码： *{margin:0;
复制链接

扫一扫