文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【CSS】固定定位 ( 固定定位概念语法 | 固定定位 = 浏览器可视窗口 + 边偏移 | 代码示例 )

一、固定定位概念语法 ---- 固定定位 是 固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ; 固定定位 完全脱离 标准流 , 不占用 布局中的位置 , 漂浮在任何元素上方...; 固定定位 只相对于 浏览器可视窗口 进行定位 , 定位的方式是通过 " 浏览器可视窗口 + 边偏移 " 进行定位 ; 固定定位 与 父元素没有任何关系 ; 固定定位 与 滚动条滚动没有任何关系 ;...固定定位的元素 始终显示在浏览器可视窗口的固定位置 , 不会改变 ; 注意相对的是 浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ; 固定定位 的 本质是一种 特殊的绝对定位 ;...就是 固定定位元素 , 拖动滚动条并不会 改变 固定定位 元素的位置 ; 低版本浏览器不支持固定定位 , 如 : IE6 浏览器 ; 二、固定定位代码示例 ---- 在上一篇博客【CSS】定位...⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 ) 代码的基础上 , 将中心的标准流元素设置为 固定定位 元素 ; 为 body 设置高度 1000px , 方便进行滚动条滚动 ;

1.7K20

动手练一练，手写一个价格对比、固定表头滚动的表格

今天我们将通过一个界面十分漂亮功能价格对比的表格，展示固定表头的功能，实例操作展示如视频所示，当滚动条滚动至表格位置，添加表头固定样式，当滚动至表格底部，移除固定表头样式。...scrollHeight: 因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。...scrollTop: 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px，可读可设置。...获取用户从视口顶部滚动的距离（pageYOffset） 获取最后一部分内容区域距离窗口顶部的高度（getBoundingClientRect().top） 检测滚动条是否滚动到表格区域。...由于窗口大小并非固定，我们会经常会拖动或调整窗口的大小，因此相关元素的宽度和视口高度都要重新计算，这里我们需要添加 resize 事件进行监听，示例代码如下： window.addEventListener

3.2K31
您找到你想要的搜索结果了吗？
是的
没有找到

CSS基础知识

p{color:red;} 三年级时，我还是一个胆小如鼠的小女孩。 结果p中的文本与span中的文本都设置为了红色。...（真霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。...如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口 相对于浏览器窗口处于右下角。并且拖动滚动条时位置固定变化。...由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响...并且拖动滚动条时位置固定不变。

1K31

scrollwidth和clientwidth_vue监听页面滚动

新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器 scrollTop 是“卷”起来的高度值，示例： <div style=”width:100px;height:100px;background-color...利用这个属性可以单独处理以像素为单位的数值. 7.style:posLetf: 返回定位元素左边界偏移量的数量值,不管相应的样式表元素指定什么单位.因为属性的非位置值返回的是包含单位的字符串,例如...left值，就是以父级对象左上角为坐标原点，向右和向下为X、Y轴正方向的x坐标 pixelLeft 设置或返回对象相对于窗口左边的位置 scrollWidth 是对象的实际内容的宽，不包边线宽度...clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

1.7K10

CSS学习

但有一些css样式是不具有继承性的，如边框 特殊性 有时候我们为同一个元素设置了不同的css样式代码，那么元素会启用哪一个css样式？浏览器根据权值来判断使用哪种css样式，使用权值高的css样式。...red; border-left:1px solid red; } 盒模型–宽度和高度 css定义的宽（width）和高（height）指的是填充以里的内容的范围。...浮动模型 可以用css定义为浮动，如div、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示。...由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终定位于浏览器窗口内视图的某个位置，不会受文档流动影响...以下代码可以实现相对于浏览器窗口视图向右移动100px，向下移动20px，并且拖动滚动条时位置固定不变。

1.1K40

scrollWidth,clientWidth,offsetWidth的区别

; 屏幕可用工作区宽度：window.screen.availWidth; scrollWidth 是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度...） clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。...offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。...clientWidth的值打 clientWidth是对象看到的宽度（不含边线） offsetWidth是对象看到的宽度（含边线，如滚动条的占用的宽） top、postop、scrolltop、scrollHeight...相对文档的水平座标 event.clientY 相对文档的垂直座标 clientWidth:是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。

2.1K20

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」

新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器 scrollTop 是“卷”起来的高度值，示例： <div style=”width:100px;height:100px;overflow...上述中 p 的 scrollHeight 为 300，而 p 的 offsetHeight 为 100。 scrollWidth 也是类似道理。...利用这个属性可以单独处理以像素为单位的数值. 7.style:posLetf: 返回定位元素左边界偏移量的数量值,不管相应的样式表元素指定什么单位.因为属性的非位置值返回的是包含单位的字符串,例如,1.2em...left值，就是以父级对象左上角为坐标原点，向右和向下为X、Y轴正方向的x坐标 pixelLeft 设置或返回对象相对于窗口左边的位置 scrollWidth 是对象的实际内容的宽，不包边线宽度...clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。

6.7K20

CSS固定定位与粘性定位4大企业级案例

fixed 固定定位 相对于浏览器窗口进行位置调整 sticky 粘性定位 是基于用户的滚动位置来定位。 固定定位 相对于浏览器窗口进行定位，其它与绝对定位的特性一致。...常见的应用有：楼梯式导航、浏览器右侧菜单、底部通栏、全屏黑色半透明遮罩弹出层、弹出注册和登录框、左上固定右自适应后台管理系统布局 粘性定位 当滚动的高度>元素与浏览器的高度时，会以fixed固定定位显示...当滚动高度<元素与浏览器高度时，会以relative相对定位显示。...） 这个效果中黑色的半透明遮罩层和弹出的视频都是相对于浏览器来固定定位的。...弹出登录注册框的原理和这个是一样的。这里以相对较为复杂的视频弹窗效是为例来讲解。

1.5K30

【前端攻略--HTMLCSS】html 文档流的理解

当对象定位在浏览器窗口以外，浏览器因此显示滚动条。 fixed：固定定位。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。...当对象定位在浏览器窗口以外，浏览器不会因此显示滚动条，而当滚动条滚动时，对象始终固定在原来位置。 relative：相对定位。...对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。 static：元素框正常生成。...”>这是c 这个结构是a包住b和c，颜色不变，a的高度为自动，b的高度为100，C的高度为500。...既然没有空间可占，那就等于容器里没有东西，所以不撑开。解决办法是在黄色DIV的后面加个DIV，然后清除浮动。让他有空间可占，自然就撑开了。试试！

2.3K20

css属性及定位操作

颜色是通过CSS最经常的指定： 十六进制值 – 如: ＃FF0000 一个RGB值 – 如: RGB(255,0,0) 颜色的名称 – 如: red 文字属性 文字对齐 text-align 属性规定元素中的文本的水平对齐方式...或者给.container加一个固定高度的子div： 固定高度解决方案(不推荐使用) 以上方案可以解决但是会使得页面操作不灵活 不推荐使用 解决方案二 清除浮动(推荐使用) clear语法：...relative（相对定位） 相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...fixed（固定） fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。...在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。 <!

2.4K50

前端知识点总结（html+css）（上）

（如div下可包含div） 行内元素（常见的行内元素a,span.img） 一行显示多个 宽度为内容的宽度 不可以设置高度和宽度 标签内一般不包含标签（如a标签内包含a标签） 行内块元素 行内块元素包含块级元素和行内元素的特征...visibilty:hidden //隐藏对应元素，在文档中仍保留位置 opacity：0 //隐藏元素，占位置，可添加事件 9. css中的overflow属性 scroll //必会出现滚动条...auto //子元素内容大于父元素，显示滚动条，超出显示，不超出不显示 visible //溢出内容出现在父元素之外 hidden //溢出隐藏 10....px和em的区别是什么 px和em都是长度单位，两者的区别是：px的值是固定的，指定为多少就是多少，计算比较容易；em的值不是固定的，是相对于容器字体的大小，并且em会继承父级元素的字体大小。...vw和vh：都是针对当前浏览器窗口大小而言，1vw就等于可视窗口宽度的百分之一，1vh 就等于可视窗口高度的百分之一。

26310

jquery nicescroll 配置参数

（你可以写“加入5px”太） cursorborder - 游标边框css定义，默认为“1px的固体＃FFF” cursorborderradius - 以像素为光标边界半径，默认为​​“递四方”...zIndex的 - 改变z-index值的滚动条的div，默认值是9999 scrollspeed - 滚动速度，默认值为60 mousescrollstep - 高速滚动鼠标滚轮，默认值是40（像素...） touchbehavior - 使光标拖动滚动像在台式电脑触摸设备（默认：false） hwacceleration - 使用硬件加速滚动支持的时候（默认：true） boxzoom - 使变焦框中的内容...touchbehavior = true时，（默认：true） autohidemode，如何隐藏滚动条的作品，真=默认/“光标”=只进游标隐藏/ false =不隐藏背景，CSS改变轨道的背景下，...（对象拖动同样的问题）（默认：true） cursorfixedheight，用于光标在像素设置固定的高度（默认：false） hidecursordelay，设置在微秒淡出滚动条的延迟时间（默认值

4.1K80

前端基础-CSS定位

如 top:100px; 距离顶部为100像素 （向下走） 1.静态定位 所有标准流都是静态定位 语法：position:static <...总结： ​ 1.相对定位参考自身在标准流中的位置进行偏移，移动的出发点是自身标准流的位置 ​ 2.不会对标准流的元素造成影响，没有脱离文档流，移动之后，自身在标准流中还占有空间，真正占得位置还是标准流的位置...> 4.固定定位 以浏览器作为参考进行偏移，且滚动条对固定定位无效 语法：position:fixed ...总结： ​ 1.会脱离文档流，不占据标准流的空间 ​ 2.不继承父元素的宽高，需要给自身定义宽高 ​ 3.margin:auto对固定定位的元素不起作用 ​ 4.不会随着滚动条滚动，永远固定在浏览器窗口中的位置...（移动的出发点：浏览器窗口，滚动条对设置了固定定位的元素无效） 使用场景：常用于网页右下角的“回到顶部”，或网站左右两侧的广告 案例： ​ 京东最右侧的小列表 案例效果图 ?

61220

【CSS】464- 5种 CSS 浮动和清除浮动的方法

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。 优点：简单，代码少，容易掌握。...缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。 建议：不推荐使用，只建议高度固定的布局时使用。 4、父级div定义overflow:auto ? ‍...原理：同1，使用overflow:auto时，浏览器会自动检查浮动区域的高度。 优点：简单，代码少，浏览器支持好。 缺点：内部宽高超过父级div时，会出现滚动条。...建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。 5、父级div定义伪类:after和zoom ?...建议：推荐使用，建议定义公共类，以减少CSS代码。

1.4K20

CSS基础（二）

：标准流、浮动、定位 目的： 解决盒子与盒子之间的层叠问题 让盒子始终固定在屏幕中的某个位置 定位使用步骤： 设置定位方式 属性名：position 属性值： 定位方式 属性值...先找已经定位的父级（一般是 相对定位），以这个父级为参照物 子绝父相 就近找定位的父级，如果逐层找不到这样的父级，就以浏览器窗口为参照物定位。...如果父级没有定位，那么以浏览器窗口为参照物。...; 位移居中 transform:translate(-50%,-50%); //位移：移动自己宽高的一半 四、固定定位 脱标，不占位置 改变位置参考浏览器窗口...auto 根据是否溢出，自动显示或者隐藏滚动条 五、显示隐藏 元素本身隐藏 让某元素本身在屏幕中不可见。

1.8K20

【实例】调整区域大小&动态隐藏区域

​ CSS布局相关及Flex详解，提及到使用Flex来完成一侧固定大小，另一随浏览器大小自动缩放。今天开发中，有这样一个需求，在两块内容中间增加一条线，然后拖拽线，可以自动调整两侧区域。...( 如鼠标 )交互时发生的事件。...MouseEvent属性 说明 实例值 clientX、clientY 设置或获取鼠标指针位置相对于窗口客户区域的 X、Y 坐标（不包括滚动条） 106+3+300-5+2=406 offsetX、offsetY...设置或获取鼠标指针位置相对于触发事件的对象的X、Y坐标 2 pageX、pageY （只读）相对于整个文档的X、Y坐标以像素为单位的只读属性（包括滚动条） 74+106+3+300-5+2=480 screenX...0（内部无滚动条） - clientHeight：可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算 - scrollHeight：返回整数，如果需要小数使用

1.7K21

用最少的代码却实现了最牛逼的滚动动画！

可以在进入/离开定义的区域或将其直接链接到滚动栏时在动画上执行操作（播放、暂停、恢复、重新启动、反转、完成、重置）。 延迟动画和滚动条之间的同步。 根据速度捕捉动画中的进度值。...嵌入滚动直接触发到任何 GSAP 动画（包括时间线）或创建独立实例，并利用丰富的回调系统做任何您想做的事。 高级固定功能可以在某些滚动位置之间锁定一个元素。 灵活定义滚动位置。 支持垂直或水平滚动。...丰富的回调系统。 当窗口调整大小时，自动重新计算位置。 在开发过程中启用视觉标记，以准确查看开始/结束/触发点的位置。...在滚动记录器处于活动状态时，如将active类添加到触发元素中：toggleClass: "active" 使用 matchMedia() 标准媒体查询为各种屏幕尺寸创建不同的设置。...自定义滚动触发器容器，可以定义一个 div 而不一定是浏览器视口。 高度优化以实现最大性能。 插件大约只有6.5kb大小。

2.4K20

用最少的代码却实现了最牛逼的滚动动画！

可以在进入/离开定义的区域或将其直接链接到滚动栏时在动画上执行操作（播放、暂停、恢复、重新启动、反转、完成、重置）。延迟动画和滚动条之间的同步。根据速度捕捉动画中的进度值。...嵌入滚动直接触发到任何 GSAP 动画（包括时间线）或创建独立实例，并利用丰富的回调系统做任何您想做的事。高级固定功能可以在某些滚动位置之间锁定一个元素。灵活定义滚动位置。支持垂直或水平滚动。...丰富的回调系统。当窗口调整大小时，自动重新计算位置。在开发过程中启用视觉标记，以准确查看开始/结束/触发点的位置。...在滚动记录器处于活动状态时，如将active类添加到触发元素中：toggleClass: "active"使用 matchMedia() 标准媒体查询为各种屏幕尺寸创建不同的设置。...自定义滚动触发器容器，可以定义一个 div 而不一定是浏览器视口。高度优化以实现最大性能。插件大约只有6.5kb大小。

2.8K00
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券