CSS粘性定位(sticky)

最新推荐文章于 2024-05-20 20:46:24 发布
最新推荐文章于 2024-05-20 20:46:24 发布
阅读量1.2w 收藏
点赞数 1
分类专栏： CSS 文章标签： html html5 css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Silencer_1/article/details/106540389
版权

原理

  • 元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。(relative)
  • 元素定位在跨越特定阈值后为固定定位。(fixed)

失效的情况

  1. 没有top, right, bottom 或 left 之一(这不是废话吗…)
  2. 浏览器兼容(看控制台)
  3. 父元素的overflow属性值为：hidden / auto / scroll
  4. body的height:100%
Silencer_1
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css粘性定位
jjlome的博客
12-03 676
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <!--粘性定位sticky--> <!--粘性定位可以被认定是相对定位和固定定位的混合。sticky粘性的--> <!--语法：-
position定位属性理解
fylxy000的博客
07-10 732
position: static HTML 元素的默认值，即没有定位，遵循正常的文档流对象；静态定位的元素不会受到 top, bottom, left, right影响 position: relative 如果没有定位偏移量，那么对元素本身没有任何影响 不使元素脱离文档流 不会影响其他元素布局 left,right,top,bottom是相对于当前元素自身进行偏移的 position:absolute 使元素完全脱离文档流 使内联元素支持宽高（让内联元素具备块级元素的特性） ...
详解CSS粘性定位 sticky
12-11
前言： position:sticky是css定位新增属性； 可以说是static（没有定位） 和 固定定位fixed 的结合； 它主要用在对 scroll 事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top：100px)； position:sticky这时的效果相当于fixed定位，固定到适当位置 讲 sticky 定位之前，我先说一下position 的其他定位， absolute： 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的 位置通过"left", "top", "right" 以及 "
CSS：深入理解粘性定位 position: sticky
热门推荐
weixin_43932309的博客
05-02 1万+
粘性定位尝鲜，祖先元素的overflow和height对结果的影响。
css定位方式之粘性定位元素，使用场景课程表或者财务报表或者活动表格，固定表头和左侧label显示
最新发布
05-20 508
元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和（最近块级祖先 nearest block-level ancestor），包括 table-related 元素，基于toprightbottom和left的值进行偏移。偏移值不会影响任何其他元素的位置。该值总是创建一个新的注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow是hiddenscrollauto或overlay。
css之定位属性（相对、绝对、固定、粘性）
qq_53165476的博客
06-04 4195
2）可以使用 left、right、 top 、 bottom 四个属性调整位置，不过最常用的是 top 值.5）粘性定位和相对定位的特点基本一致，不同的是:粘性定位可以在元素到达某个位置时将其固定。都发生定位的两个元素，后写的元素会盖在先写的元素之上。5）无论是什么元素(行内、行内块、块级)设置为绝对定位之后，都变成了定位元素.5）无论是什么元素(行内、行内块、块级) 设置为固定定位之后，都变成了定位元素。1，定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
CSS：图片不拉伸，垂直居中显示
qq_42034498的博客
12-15 2104
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
css之sticky定位
Kratial的博客
10-08 7718
css之sticky定位
详解css粘性定位position：sticky问题采坑
12-14
<div id="sticky-nav">这是一个tab切换栏，给sticky定位top=100px 发生滚动 ;">发生滚动 ``` 在实际项目中，可能会遇到兼容性问题。例如，在某些Android设备或小程序环境中，`position: sticky`可能存在点击穿透和...
CSS使用position:sticky 实现粘性布局的方法
09-24
【CSS position:sticky 粘性布局】 在CSS布局中，`position:sticky` 是一个实验性的特性，它提供了一种独特的定位方式，将元素的行为结合了`position:relative` 和 `position:fixed` 的特点。在某些场景下，`...
css图片定位
05-01
CSS提供了多种定位方式，包括静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky）。静态定位是元素的默认定位方式，不改变元素在文档流中的位置。相对定位则...
容易忽视的CSS3粘性定位position sticky
weixin_45709829的博客
03-26 2356
CSS3粘性定位position sticky 一、介绍 css3中新的定位属性，本身也具有定位元素的属性 理解为相对定位position:relative + 固定定位position:fixed的混合体 position:sticky粘性定位，基于用户的滚动定位 二、基本原理 依赖用户的滚动定位，行为像position:relative，当页面滚动超出目标区域，行为表现为position:fixed 什么是目标区域 相对父元素，超出阈值，这个阈值通过top、left、right、bottom确定 滚动元
css粘性定位position：sticky
MichaelAn的博客
02-13 1228
css粘性定位position：sticky 前言：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；pos...
css粘性定位以及定位总结
lxllxl211的博客
10-04 549
3、必须+top、bottom、right、left其中的一个才有效。1、以浏览器的可视窗口为参照点移动元素（固定定位特点）就是可以随便移动滚动条，而且方块保持在固定位置。粘性定位可以被认为是相对定位和固定定位的混合。2、粘性定位占有原先的位置（相对定位特点）
CSS---绝对定位、相对定位、粘性定位
bidepanm的博客
05-10 261
position: absolute; 绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即设置了绝对定位或者相对定位的祖先元素。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。 position: relative;相对定位：相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上（即不设置position时的位置），然后通过设置垂直或水平偏移，让这个元素“相对于”它的原始起点进行移动； ...
HTML粘性定位,CSS：position——绝对、相对、固定、粘性定位的简单记录
weixin_32821643的博客
06-07 763
一、相对定位——relative有偏移量(left、right、top、bottom)时，元素相对于自身进行偏移，元素不脱离文档流(在原位置还占有空间)，不影响其他元素布局。#one{width: 50px;height: 50px;background: orangered;border: 1px solid #000;}#two{width: 50px;height: 50px;backgro...
CSS中的定位怎么运用
greentrainsad的博客
10-25 93
什么是定位 相对定位 固定定位 绝对定位 粘滞定位
【前端基础系列】CSS篇-带你了解position:sticky
Web面试那些事儿的博客
01-01 2548
如果问，CSS 中 position 属性的取值有几个？大部分人的回答大概是staticrelativeabsolutefixed，实际上MDN上还有一个sticky。今天我们就来给大家介绍这个容易被忽视的position属性值sticky。先来看看MDN上对于sticky的介绍：粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。粘性定位可以被认为是相对定位和固定定位的混合。什么是结合两种定位功能于一体呢？
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、付费专栏及课程。

余额充值