css3学习---粘性定位sticky

最新推荐文章于 2024-07-21 20:01:56 发布
最新推荐文章于 2024-07-21 20:01:56 发布
阅读量523 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wei_dan1129/article/details/105030615
版权
本文介绍了CSS3的粘性定位（sticky）特性，阐述了其在滚动过程中使元素固定在顶部的效果。同时，详细列出了使用粘性定位的四个条件，包括必须指定定位方向、父元素高度限制、只在父元素内生效以及父级父级元素不能有position设置。此外，还解释了粘性定位是相对定位和固定定位的结合，适用于scroll事件监听，当元素达到特定位置时会像fixed定位一样固定。
摘要由CSDN通过智能技术生成

粘性定位设置

<div class="content">
	<div class="sticky"></div>
</div>
.content{
   
	height:3000px;
最低0.47元/天 解锁文章
wei_dan1129
关注
Navbar-CSS-Sticky-Blurry
05-22
"Navbar CSS粘性模糊" 是一种流行的设计趋势，它结合了CSS的“粘性定位”（sticky positioning）和“模糊效果”（blur effect），使得导航栏在滚动页面时保持可见，并呈现出独特的视觉风格。 “粘性定位”是CSS3中...
Sticky 黏性定位 兼容性css3
muzidigbig的博客
02-18 3358
　　最近有点忘了position几个取值的内容，在这里简单总结一下。 　　position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。 1、position: static 　　static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。 2、position: relative 　　r
CSS3之position:sticky使用
编码世界
11-20 1787
css3中position有个属性值sticky，即粘型定位，初级面试中会经常问到，大多数面试者往往会忽略这个属性值，其可以理解为相对定位（relative）和固定定位(fixed)的结合。
css的粘性布局（sticky）
最新发布
2201_75773271的博客
07-21 514
position 中的 sticky 值是 CSS3 新增的，设置了 sticky 值后，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。●当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。●元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量。
【趣味CSS3.0】粘性定位属性Position:sticky是不是真的没用了？
极客小俊
01-24 1018
难道用你的口水去黏住它吗! =￣ω￣=
CSS position属性sticky
weixin_44384273的博客
02-19 1784
position:sticky
介绍css3中position:sticky？
祈澈菇凉
11-13 191
position: sticky 是 CSS3 中的一个定位属性，用于创建一个在滚动过程中相对于容器固定位置的元素。它可以将元素的定位设为相对定位（relative）或固定定位（fixed），具体取决于滚动的位置是否超过了容器的特定阈值。2：滚动过程中的行为：当元素滚动到容器的阈值位置时（由 top、bottom、left、right 等属性定义），元素将固定在容器中的指定位置，不再随滚动而移动。3：继续滚动的行为：当滚动超过容器的范围时，元素将恢复正常流位置，重新随滚动而移动。
Pure-Css-Sticky-Navigation-Bar
05-04
纯CSS粘性导航栏是一种网页设计技术，它允许导航栏在用户滚动页面时始终保持在屏幕顶部，从而提高用户体验。这个项目“Pure-Css-Sticky-Navigation-Bar”专注于使用纯CSS实现这一功能，不依赖JavaScript或其他外部库...
详解CSS粘性定位 sticky
12-11
CSS粘性定位（sticky positioning）是CSS布局中的一种特性，它允许元素在用户滚动页面时在特定条件下保持可见。在CSS中，`position: sticky`是实现这一效果的关键。这个属性可以看作是`static`（无定位）和`fixed`...
Sticky-Scroll-CSS-JS-
05-11
在网页设计中，"Sticky-Scroll-CSS-JS-"是一种常见的交互效果，它使得页面元素在用户滚动页面时能够保持在屏幕的特定位置，直到达到预设的停止点。这种效果通常用于导航栏，使其在用户滚动页面时始终保持可见，从而...
详解css粘性定位position：sticky问题采坑
12-14
<div id="sticky-nav">这是一个tab切换栏，给sticky定位top=100px <p class="scroll-container">发生滚动 <p class="scroll-container" style="background:lightgoldenrodyellow;">发生滚动 ``` 在实际项目中，可能...
CSS3 sticky 粘性布局
qq_45272642的博客
02-24 718
在 CSS 中位置属性position大家对relative、fixed、absolute已经用的非常熟悉了，在 CSS3 中出现了sticky这个特殊的定位方式。 功能描述 在 W3C 标准中sticky功能描述：元素的位置基于用户滚动位置定位，sticky定位的元素位置在relative和fixed之间切换，具体取决于滚动位置。它会被相对定位，直到浏览器可是区域中满足给定的偏移位置，否则会被粘住到固定的位置。（W3C Positon） 如何理解它的定位方式呢，我们直接上 ...
css3 position定位—— sticky 定位
weixin_48813932的博客
03-24 1463
当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
容易忽视的CSS3粘性定位position sticky
weixin_45709829的博客
03-26 2465
CSS3粘性定位position sticky 一、介绍 css3中新的定位属性，本身也具有定位元素的属性 理解为相对定位position:relative + 固定定位position:fixed的混合体 position:sticky粘性定位，基于用户的滚动定位 二、基本原理 依赖用户的滚动定位，行为像position:relative，当页面滚动超出目标区域，行为表现为position:fixed 什么是目标区域 相对父元素，超出阈值，这个阈值通过top、left、right、bottom确定 滚动元
CSS3新增定位属性sticky，粘性定位
weixin_43915587的博客
04-05 1266
position:sticky sticky 英文字面意思是粘，粘贴。 这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。 什么是结合两种定位功能于一体呢？ 元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。 而后，元素...
CSS Sticky
JunChow
06-18 490
position:sticky; sticky原意为“粘贴的”，属于CSS3中position定位属性新增的一个属性值，称之为粘性定位，它是结合relative相对定位和fixed固定定位于一体的特殊定位方式，适用于某些特殊场景比如sticky footer。 例如：设置sticky的元素默认定位方式为relative，当它的位置超过指定阈值时定位方式会自动切换为fixed，直到父级元素离开屏幕...
css3新增的sticky定位
ljyahaha的博客
02-02 176
position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。 sticky属性的几个特点： 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top:50px，那么在sticky元素到达距离相对
css 实现sticky 吸顶吸底效果
weixin_42421494的博客
12-20 4114
css 吸顶/吸底，粘性布局
css粘性定位position:sticky问题采坑
06-28
CSS粘性定位（position:sticky）是一种新的定位方式，它可以在不同滚动位置下保留元素位置，使得页面更加直观。但是这种方式还存在一些采坑需要注意。 首先是浏览器兼容性问题。目前，不支持CSS粘性定位的浏览器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值