首页 > 其他分享 >CSS笔记—盒子定位之固定定位(重难点!!小白刚需)

CSS笔记—盒子定位之固定定位(重难点!!小白刚需)

时间:2024-10-17 21:20:25浏览次数:3  
标签:定位 盒子 bottom 小白刚 元素 重难点 固定 fixed

1、固定定位的概念

        固定定位(fixed)的元素位置相对于浏览器窗口进行定位(会脱离文档流),即使页面滚动,固定定位元素不会随滚动条滚动,除非改变浏览器窗口的位置或大小‌ 

2、语法格式: 

<head>

        选择器{position: fixed;}

</head>

水平位置:

  • left定位元素和定位元素的左边距离
  • right定位元素和定位元素的右边距离 

垂直位置 

  • top定位元素和定位元素的上边距离
  • bottom定位元素和定位元素的下边距离 

eg: 

<iframe allowfullscreen="true" data-mediaembed="csdn" frameborder="0" id="rdTzXTde-1729157059607" src="https://live.csdn.net/v/embed/429808"></iframe>

盒子_固定定位

         在视频中可以看出盒子3和盒子5在拖动滚动条时盒子不动,其他都会随着拖动滚动条时滚动。

运行代码:

<head>
    <style>
        div{
            width: 120px;
            height: 1 20px;
            background-color: pink;
            margin-bottom: 5px;
            font-size:30px;
        }
        #div3{
        
            background-color:aqua;
            margin-bottom: 5px;
            position: fixed;
            left: 216px;
            top: 216px;
        }
        #div5{
            background-color: blue;
            margin-bottom: 5px;
            position: fixed;
            left: 250px;
            top: 250px;
           
        }
    </style>
</head>
<body>
    <div>盒子1</div>
    <div>盒子2</div>
    <div id="div3">盒子3(固定定位)</div>
    <div>盒子4</div>
    <div id="div5">盒子5(固定定位)</div>
    <div>盒子6</div>
    <div>盒子7</div>
    <div>盒子8</div>
    <div>盒子9</div>
</body>

3、固定定位的实际应用

(1)导航栏

        固定定位常用于创建始终可见的导航栏。这样,用户可以在浏览页面时随时访问导航链接,提高用户体验 

 (2) 侧边栏

        固定定位的侧边栏可以提供额外的信息或导航选项,而不会随着页面滚动而消失

(3)广告

        固定定位的广告可以在页面上保持可见,增加广告的曝光率

标签:定位,盒子,bottom,小白刚,元素,重难点,固定,fixed
From: https://blog.csdn.net/lz7_123/article/details/143022206

相关文章

  • 记一次复现实战去付费-虚拟定位App孙悟空
    这个APP需要通过直接去输入卡号,通过卡号付费实现虚拟定位的操作,同时虚拟定位的功能是在java层的静态代码块中实现的,所以直接去HOOK掉对应的检测卡密的过程就可以了分析:JEB实现反编译过程,通过搜索字符串('登录'),发现可以直接去查看到对应的函数位置publicvoidrun()......
  • Vue2 - 详细实现安装引入百度地图并查询展示周边交通/教育/医疗/商场/生活/娱乐等POI
    前言Vue3版本,请访问在vue2|nuxt2项目开发中,详解高德地图根据当前定位获取周边附近的商圈,vue2高德地图获取周边商圈并将这些地址位置列出来供用户点击跳转和选择,获取当前位置或指定区域周边的交通出行、学校教育、医院诊所、商场购物、生活娱乐、旅游景点、酒店民宿......
  • 单片机项目|基于STM32实现具有室内定位功能的智能手环的设计
    作者简介:Java领域优质创作者、CSDN博客专家、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、多年校企合作经验,被多个学校常年聘为校外企业导师,指导学生毕业设计并参与学生毕业答辩指导,有较为丰富的相关经验。期待与各位高校教师、企业......
  • 盒子绝对定位开启视觉新纪元(脱离文档流)
    目录一、概念二、语法结构三、特点四、绝对定位的使用五、浮层效果六、总结七、练习一、概念绝对定位会脱离文档流,相对于已经定位的上层元素(position)进行定位;若上层元素没有定位,则向更上层寻找已定位元素,直到根元素。二、语法结构<style>选择器{/*......
  • css盒子的定位(绝对定位)
    如何给定位盒子    想给盒子定位,必须提供三个要素,锚点、方向和距离。而盒子的相对定位,就是以元素本身的位置作为锚点。盒子定位的属性名和属性值        position:absolute;绝对定位的锚点        absolute是绝对定位元素,其锚点是父辈属性,即......
  • 五官定位 API 对接说明
    五官定位API对接说明本文将介绍一种五官定位API对接说明,它可以通过输入图片,对请求图片进行五官定位(也称人脸关键点定位),计算构成人脸轮廓的90个点,包括眉毛(左右各8点)、眼睛(左右各8点)、鼻子(13点)、嘴巴(22点)、脸型轮廓(21点)、眼珠[或瞳孔](2点)。接下来介绍下五官......
  • css盒子的定位(相对定位)
    如何给定位盒子    想给盒子定位,必须提供三个要素,锚点、方向和距离。而盒子的相对定位,就是以元素本身的位置作为锚点。盒子定位的属性名和属性值        position:relative    relative值代表的定位是以元素本身的位置作为锚点,元素本体的位置并......
  • 【故障定位】基于多元宇宙算法的主动配电网故障定位方法研究(Matlab代码实现)
    ......
  • 【故障定位】基于多元宇宙算法的主动配电网故障定位方法研究(Matlab代码实现)
    ......
  • UM981S全系统全频RTK/INS 组合定位模块的技术指标
    1测试结果受大气条件、基线长度、GNSS天线类型、多路径、可见卫星数以及卫星几何构型等影响,可能会有偏差2测量使用1公里基线和天线性能良好的接收机,不考虑可能的天线相位中心偏移误差3开阔天空,无遮挡场景,99%@静态4-130dBm@可用星超过12颗5固件版本升级后数据......