什么是粘性定位,如何使用粘性定位

最新推荐文章于 2024-04-19 15:59:41 发布
最新推荐文章于 2024-04-19 15:59:41 发布
阅读量2.4k 收藏 2
点赞数 1
分类专栏： css 文章标签： css3 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tjq11111/article/details/121109540
版权

position：sticky 开启粘性定位

个人理解：

粘性定位：在正常情况下，相当于相对定位，并不会脱离正常文档流，占有位置

一但浏览器滚动轴y轴运动，粘性定位便如同固定定位一样，脱离文档流，固定在浏览器某一位置

后跟  top:固定在具体什么位置

         left：固定在具体什么位置

外围前端吴彦祖
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
四大定位的使用
wuwei_19981001的博客
11-02 245
固定定位，相对定位，绝对定位，粘性定位，哪一个不影响布局，父相子绝
前端进阶html+css03----粘性定位
weixin_43795761的博客
02-27 629
大家都知道position:absoulte/relative/fixed, 今天介绍一个position:sticky（粘性定位）。3.当内容足够多并往下滚动的时候，其它元素变化，但粘性定位的区域会一直固定在你设置的位置不动。2.使用黏性定位必须要有一个“滚动的祖先元素”，没有滚动的时候和relative效果差不多。4.你设置的（top/bottom/right/left)是相对于滚动父元素的。1.粘性定位是相对定位和绝对定位的结合体。top改为20px的时候滚动时效果。
定位：绝对定位、固定定位、粘性定位
最新发布
mobolove的博客
04-19 395
边偏移就是定位的盒子移动到最终的位置。2.原来在标准的位置继续占有，后面的盒子仍然以标准流的方式对待它(不投标，继续保留原来位置)2.如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考移动位置。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。1.它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。
【前端初学者】【CSS笔记】之定位：相对定位、绝对定位、固定定位、静态定位及粘性定位（上）
HY_Sophie的博客
12-07 1928
【前端初学者】【CSS笔记】之定位：相对定位、绝对定位、固定定位、静态定位及粘性定位（上）
彻底理解粘性定位 - position: sticky（IT枫斗者）
Andrew_Chenwq的博客
05-20 891
粘性定位可以被认为是相对定位(position: relative)和固定定位(position: fixed)的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。在 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到视口回滚到阈值以下。粘性定位常作用在导航和概览信息(标题，表头，操作栏，底部评论等)上。这样，用户在浏览详细信息时，也能看到信息的概览和做一些操作，给用户带来便捷的使用体验。
css中的position定位
forteenBrother的博客
07-31 525
position属性用于指定一个元素在文档中的定位方式。定位属性：top right bottom left 决定了元素的最终显示位置。
背景图片粘性定位案例图
03-14
其中含有粘性定位和锚点等
固定定位和粘性定位还有锚点案例
11-20
固定定位和粘性定位还有锚点用法案例
详解CSS粘性定位 sticky
12-11
简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top：100px)； position:sticky这时的效果相当于fixed定位，固定到适当位置 讲 sticky 定位之前，我先说一下position 的其他...
demoTest:table 列粘性定位
05-11
在IT行业中，尤其是在前端开发领域，"table 列粘性定位"是一个常见的需求，它涉及到网页布局和用户体验优化。在创建数据密集型的表格时，为了保持用户在滚动页面时能够始终看到列头，粘性定位（Sticky Positioning）...
CSS基础学习之定位—流定位 浮动定位 相对定位 绝对定位 固定定位 粘性定位
01-08
CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位粘性定位堆叠顺序定位属性总结 定位 定位简介 定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的...
position: sticky；粘性定位
前端小狮的博客
08-28 640
想整个滚动条插件，但是里面的元素如果用absolute定位的话，会跟随滚动条滚动，fixed也不好用，偶然查到position: sticky；，确实可以解决这个问题（但兼容很差），先谷歌用着吧 position: sticky; 基于用户的滚动位置来定位。 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;.
粘性定位
LKL89001552的博客
03-22 262
前言： position:sticky是css定位新增属性；可以说是static（没有定位） 和 固定定位fixed 的结合；它主要用在对 scroll 事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top：100px)； position:sticky这时的效果相当于fixed定位，固定到适当位置 讲 sticky 定位之前，我先说一下position 的其他定位， absolute： 生成绝对定位的元素，相对于 static 定位以外的第一个父
Html之position粘性定位
qq_32161465的博客
06-03 1152
Html之position粘性定位
[wechart] 微信小程序使用粘性定位position: sticky的注意事项(避坑)
前端一线搬运工的博客
07-13 8507
前言： position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。 使用： #sticky-nav { position : sticky ; top : 100px ; } 设置position:sticky同时给一个(top,.
position:sticky； 粘性定位 入门级别
业余前端的职业经历
02-24 1089
说实在用到粘性定位的地方肯定有 但是不多， 在讲解之前小看个小效果 就上面图中的那种效果 让你写 如果用js的话怎么写 就是判断根据用户滚动的高度 把元素的位置移动一下 但是 js代码写起来是不是 好像还是有点多的吧 但是使用粘性定位就很简单了 粘性定位可以用在类似上面的那种业务需求中 在每一个元素上面 加两行样式代码就搞定了 position: sticky; top: 0; 好了步入正题了 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后...
定位全解(绝对，相对，固定，粘性定位)
DangR_Jisoo的博客
11-24 1509
定位全解(绝对，相对，固定，粘性定位) 一. 绝对定位(position: absolute) 绝对定位是元素在移动的时候，相对于其父亲来说的(拼爹型)，若无父元素，按其祖先元素，如其父元素或祖先元素无定位，则以浏览器为主 元素设置绝对定位后，不再占有原来的位置，其他的元素会涌上来，而且设置绝对定位会压住下面的标准流 <style> * { margin: 0; padding: 0; }
css粘性定位
友人C君的博客
01-24 1674
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>粘性定位</title> <style> div.sticky { position: -webkit-sticky; position: sticky; top: 0; p...
CSS粘性定位怎么使用
07-12
CSS粘性定位是一种介于相对定位和固定定位之间的定位方式，它可以使元素在滚动时保持在指定位置。要使用粘性定位，可以按照以下步骤进行操作： 1. 首先，在CSS中选中要应用粘性定位的元素。可以使用类名、ID或标签名来选中元素。 2. 接下来，使用position属性设置元素的定位方式为sticky（粘性）。例如： ``` .sticky-element { position: sticky; top: 20px; /* 设置元素距离顶部的距离 */ } ``` 3. 确定元素的定位参考点。默认情况下，粘性定位会相对于父元素进行定位，但也可以通过设置其他元素作为参考点。可以使用z-index属性来控制元素的层叠顺序。 4. 最后，根据需要设置其他样式，如宽度、高度、背景色等。 注意事项： - 粘性定位只在支持该特性的浏览器中生效，老版本的浏览器可能不支持。 - 粘性定位的元素在其父元素范围内滚动时才会起作用，如果父元素没有滚动条，则粘性定位无效。 - 粘性定位的元素会在滚动到特定位置后变为固定定位，可使用top、bottom、left和right属性来调整元素的位置。 希望以上解答对你有所帮助！如果还有其他问题，可以继续提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值