html中的固定定位的用法

文章目录


前言

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


一、固定定位的理解?

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

二、固定定位用在哪里?

1、给大家分享一个案例

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

2、代码编写

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

        1、先准备一个小案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 5000px;
        }
        /* 大盒子的样式 */
        .a1 {
            width: 40px;
            height: 40px;
            background-color:aqua;
        }


    </style>

</head>

<body>
    <div class="a1">
         测试盒子
    </div>
</body>

</html>

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

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

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

        4、效果图如下:


总结

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

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

  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Html固定顶部定位滚动导航是指在网页的顶部创建一个导航栏,并使其在滚动页面时保持固定在顶部位置。这样用户在浏览页面时无论滚动到哪里,导航栏始终可见,方便用户进行网站导航和跳转。 实现固定顶部定位滚动导航的方法有多种,其一种常用的方法是使用CSS的position属性与JavaScript来实现。 首先,在HTML创建一个包含导航栏的div,并给其设定id属性,使其可以在CSS进行样式设置。例如: ``` <div id="navbar">导航栏内容</div> ``` 接下来,在CSS添加样式规则,使导航栏显示在网页顶部,并设置其固定定位。例如: ``` #navbar { position: fixed; top: 0; left: 0; width: 100%; background-color: #f1f1f1; } ``` 然后,在JavaScript添加代码,以实现滚动时导航栏的定位。当用户滚动页面时,通过监听滚动事件,判断滚动条的垂直位置,如果滚动条的垂直位置超过了导航栏的顶部位置,则给导航栏添加一个类名,通过CSS设定此类名对应的样式,使导航栏固定在顶部。例如: ``` window.onscroll = function() { var navbar = document.getElementById("navbar"); var scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; if (scrollPosition > navbar.offsetTop) { navbar.classList.add("fixed"); } else { navbar.classList.remove("fixed"); } }; ``` 最后,在CSS给导航栏的固定样式添加一个类名,如".fixed",并设置样式规则。例如: ``` .fixed { position: fixed; top: 0; z-index: 100; //其他样式设置 } ``` 通过以上步骤,即可实现html固定顶部定位滚动导航。当用户滚动页面时,导航栏将保持固定在顶部位置,方便用户进行网站导航和跳转。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值