html中的固定定位的用法

文章目录

前言

一、固定定位的理解？

二、固定定位用在哪里？

1、给大家分享一个案例

2、代码编写

        1、先准备一个小案例

        2、效果如下，浏览器左上角有个盒子，右边有滚动条

         3、我想让他像我们的csdn一样，这个盒子固定在右下角，然后不论怎么滑动滚动条，都一直在这个位置，这个时候就需要我们的固定定位出马了,只需要改一下盒子的样式就行了

        4、效果图如下：

总结

---

---

前言

        在上一篇博客中html中的定位知识点如何使用_小魏快起床的博客-CSDN博客给大家主要分享了html中的绝对定位和相对定位的用法，那么里面提到了一个固定定位，这个总该解释解释吧，咱们也是一个有始有终的开发者。

---

一、固定定位的理解？

        固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

二、固定定位用在哪里？

1、给大家分享一个案例

        在我们csdn的页面上，不管页面如何滚动，红圈里面的元素一直保持在这个位置，我们要做到这个效果，该如何实现呢?

2、代码编写

        我这里不做一模一样的效果，我给大家用普通的样式盒子进行替代教学

        1、先准备一个小案例

    
    
    
    
    




    

         测试盒子
    

        2、效果如下，浏览器左上角有个盒子，右边有滚动条

         3、我想让他像我们的csdn一样，这个盒子固定在右下角，然后不论怎么滑动滚动条，都一直在这个位置，这个时候就需要我们的固定定位出马了,只需要改一下盒子的样式就行了

        .a1 {
            width: 40px;
            height: 40px;
            background-color:aqua;
            position: fixed;
            top: 500px;
            left: 1100px;
        }

        4、效果图如下：

---

总结

        固定定位用 position: fixed;然后用方向词进行偏移，然后就固定起来啦！！！

看都看到这儿了，留下三连呗，谢谢各位看官老爷们儿！