简单理解sticky定位与fixed定位的区别

最新推荐文章于 2024-04-23 21:54:41 发布
最新推荐文章于 2024-04-23 21:54:41 发布
阅读量4.3k 收藏 5
点赞数 6
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53722426/article/details/120868274
版权

fixed:固定定位，相对于可视窗口定位，一但使用top，left绑定后，无论怎么滚动可视窗口区域（也就是滑动滚动条），它的位置都不会发生变化

sticky:粘性定位，相当于是相对定位和固定定位的结合，既有相对定位的保留自己原来位置的特点又有固定定位相对于可视窗口定位的特点，必须至少含有top，left，right，bottom中一个进行绑定，比如说position:sticky  top:100px;  margin-top:400px   那么就是说这个小盒子初始情况距离顶部400px，在向下滚动300px范围内都是相对定位展现，直到小盒子滚动到小盒子上边框距离浏览器可视窗口上沿的距离只有100px时，它转换为固定定位，就始终保持与可视窗口上沿100px的距离不再改变

Mike_Jei
关注
  • 6
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
position的sticky与fixed
weixin_30311605的博客
10-28 379
fixed（固定定位） 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。 sticky 　　position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、le...
CSS position定位（fixed、sticky）
大圣归来圣骑士清欢的博客
12-27 855
CSS position定位（fixed、sticky）
理解CSS中的sticky与fixed定位
最新发布
nbsaas-boot基于Request-Response的企业级快速开发框架
04-23 569
在CSS中，和是两种常见的定位方式，它们可以让元素脱离文档流，并具有固定位置的效果。然而，它们在实际应用中有着不同的特点和使用场景。
关于固定定位与粘性定位的详解（子篇章）
weixin_47966295的博客
02-08 1461
补上一些学习笔记，内容不多也算是做一个总结（目前正在努力学习前端、查缺补漏） 本篇文章主要谈谈自己对于Css定位的理解 本篇文章讲解相对定位，为单独一篇详细讲解 往期 Vue简单入门 Leangoo基本概念普及 关于绝对定位的详解（子篇章） 关于相对定位的详解（子篇章） 主篇章 Css中的定位概念及各定位方法笔记分享 文章目录往期主篇章固定定位（fixed）相对于浏览器固定某个元素不随着滚动条的滚动而滚动验证固定定位是脱离标准流的（脱标）粘性定位（sticky） 固定定位（fixed） 相对于.
css中的position定位
forteenBrother的博客
07-31 518
position属性用于指定一个元素在文档中的定位方式。定位属性：top right bottom left 决定了元素的最终显示位置。
CSS中Position属性
weixin_45914210的博客
12-12 611
CSS中Position属性详解 首先说一下position的属性值都是相对谁进行定位的 1.position: absolute :生成绝对定位的元素,相对定位的对象可以分为两种情况： 相对于最近一级的定位,不是 static 的父元素来进行定位。 如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。 2.position: fixed（老IE不支持）生成绝对定位的...
css:fixed定位兼容不同系列不同版本的浏览器包括IE6.0
09-25
此外，随着技术的发展，CSS的新的版本如CSS3引入了更多高级定位特性，如`sticky`定位，它结合了`relative`和`fixed`的优点，当元素进入视口时固定，离开视口时恢复。对于新的项目，考虑使用这些更现代的技术可以简化...
vue滑动吸顶及锚点定位的示例代码
10-15
首先，让我们深入理解滑动吸顶（Sticky Header）的概念。滑动吸顶是当页面向下滚动时，某个元素（通常是顶部导航栏）保持在屏幕顶部，即使其原始位置已超出视口。这种效果可以提供一致的用户体验，让用户在滚动页面...
CSS中的元素定位方法详解
09-25
可选值包括static（默认值，遵循正常的文档流）、relative（相对定位，基于元素原本的位置进行偏移）、absolute（绝对定位，相对于最近的非static祖先元素定位）、fixed（固定定位，相对于浏览器窗口定位，即使滚动...
CSS的position定位和float浮动详解
09-27
5. `sticky`（CSS3新增）：粘性定位，元素在屏幕内的某个区域内表现为相对定位，当超出该区域时变为固定定位。 `position`的使用需要注意一些问题，例如，当一个设置了`absolute`定位的元素宽度被设置为100%，其...
vue实现吸顶、锚点和滚动高亮按钮效果
10-16
`position: sticky` 结合了 `position: relative` 和 `position: fixed` 的特性，使元素在满足特定条件时保持在视口内的固定位置。但是，`position: sticky` 的兼容性并不理想，尤其是对较旧的浏览器如 IE11 不支持...
固定定位和粘滞定位
weixin_65607135的博客
08-15 711
粘滞定位必须配合top使用；例如上面代码，当top值没有到50px时，他就被固定了，这就是粘滞定位。(4)配合top值设置，没有达到top值之前正常显示，随着滚动条滚动而滚动，-当元素的position属性设置为sticky时，则开启了元素的粘滞定位。不管你怎么滑动鼠标，黄色的盒子一直就是在这个位置固定住了，这就是固定定位。当元素的position属性设置fixed时，则开启了元素的固定定位。（3）固定定位不占有原来的位置，即脱离标准流 ，更改元素的性质。（3）粘滞定位可以在元素到达某个位置时，将其固定。.
CSS 定位（静态、固定、相对、绝对、粘性）
Ares5k
04-08 738
静态定位、固定定位、相对定位、绝对定位、粘性定位
position:sticky 粘性定位 (sticky) 与 固定定位
学习园地
01-21 5909
position:sticky是css定位新增属性；可以说是static（没有定位） 和 固定定位fixed 的结合；它主要用在对 scroll 事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置 position 的其他定位 absolute： 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过"left",.
CSS定位有哪些值，分别是相对谁定位？
http____的博客
12-18 862
目录CSS position属性staticrelative 相对定位absolute 绝对定位fixed 固定定位sticky 黏性定位常用定位——“子绝父相” CSS position属性 css 的 position 属性用于指定一个元素在文档中的定位方式。top、right、buttom、left属性则决定了该元素的最终位置。 position取值：static（默认）| relative | absolute | fixed | sticky static 一般的标签元素不加任何定位属性都属于静态
fixed与sticky的区别
weixin_30655569的博客
10-13 787
Sticky可以使用参数，是位置跟relative使用参数的效果是一致的，都是相对于static的变化；sticky具有“滚动机制”。 sticky定位可以被认为是relative和fixed的混合。粘性定位的元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定的，直到它到达其父母的边界。 转载于:https://www.cnblogs.com/lizhidage/p/9782756...
粘性定位解析
m0_53062159的博客
02-27 559
粘性定位可认为是相对定位和固定定位的结合，元素在跨越特定阈值前表现为相对定位，之后表现为固定定位。粘性定位的元素依赖于用户的滚动，在 relative 与 fixed 定位之间切换。四个阈值其中之一，才可使粘性定位生效，否则其行为与相对定位相同。该样例使黄色的块元素在距离顶部。该样例使黄色的块元素在距离顶部。
position属性中sticky和fixed的区别
weixin_30399155的博客
10-15 1717
sticky可以使用参数，是位置跟relative使用参数的效果是一致的，都是相对于static的变化；sticky具有“滚动机制”。sticky定位可以被认为是relative和fixed的混合。粘性定位的元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定的，直到它到达其父母的边界。 fixed相对于视口定位，不管视口如何滚动，它的位置始终不变，而sticky则是在目标区域内随着页面的...
position sticky定位
07-29
引用\[1\]:position: sticky又称为粘性定位，是css3新增的。粘性定位的元素依赖于用户的滚动，在相对定位（relative）与固定定位（fixed）之间进行切换，基于位偏移的值进行偏移。粘性定位可以被认为是相对定位和固定定位的混合，元素在跨越特定位偏移之前为相对定位，之后为固定定位。\[1\] 引用\[2\]:position: sticky可以简单理解为是static和fixed的结合。在父元素滑动过程中，子元素距离其父元素的距离达到sticky粘性定位的要求时，position: sticky的效果相当于fixed定位，固定到适当位置。\[2\] 引用\[3\]:在Vue2中使用position: sticky的示例代码如下： ```html <template> <div class="box"> <div class="box-scroll"> <div v-for="(item, index) in 10" :key="index">{{ index + 1 }}</div> <div class="box-scroll-sticky">我要悬浮在40px处</div> <div v-for="(item, index) in 100" :key="index">{{ index + 1 }}</div> </div> </div> </template> <script> export default {}; </script> <style lang="scss" scoped> .box { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; &-scroll { height: 400px; width: 400px; background: #eee; overflow: auto; //父元素必须是scroll display: flex; flex-direction: column; position: relative; > div { width: 100%; height: 40px; border-bottom: 2px solid #fff; } &-sticky { position: sticky; top: 40px; //至少设置一个 background: red; color: #fff; } } } </style> ``` 以上示例代码中，使用了position: sticky来实现一个滚动容器内的元素在滚动到一定位置时固定在顶部。\[3\] 综上所述，position: sticky是一种CSS定位属性，它可以使元素在滚动过程中在特定位置固定。它的效果类似于相对定位和固定定位的结合，当元素距离其父元素的距离达到指定值时，元素会固定在该位置。在Vue2中，可以通过设置position: sticky来实现元素的粘性定位效果。 #### 引用[.reference_title] - *1* [position:sticky粘性定位的几种巧妙应用与理解。](https://blog.csdn.net/qq_51602285/article/details/126850899)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v4^insert_chatgpt"}} ] [.reference_item] - *2* *3* [position:sticky粘性/悬浮定位](https://blog.csdn.net/Chuinj/article/details/130714048)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v4^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值