CSS3新增的特性：粘性定位

最新推荐文章于 2025-10-21 21:02:13 发布
最新推荐文章于 2025-10-21 21:02:13 发布
阅读量215 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： css3 前端 css 编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/LogicGuruX/article/details/133547752
编程 专栏收录该内容
407 篇文章 ¥29.90 ¥99.00
订阅专栏
本文介绍了CSS3的粘性定位，这是一种介于相对定位和固定定位之间的定位方式，允许元素在滚动时保持在页面特定位置。文中详细阐述了粘性定位的用法，提供了源代码示例，并讨论了兼容性问题，特别指出旧版Internet Explorer不支持，可能需要借助JavaScript实现类似效果。

CSS3中引入了许多新的特性和功能，其中之一就是粘性定位。粘性定位是一种介于相对定位和固定定位之间的定位方式，它允许元素在滚动时保持在页面上的特定位置。本文将详细介绍粘性定位的用法，并提供相应的源代码示例。

粘性定位的用法

要使用粘性定位，需要使用CSS的position属性，并将其值设置为sticky。此外，还需要使用top、bottom、left或right属性来指定元素相对于其最近的具有滚动框的祖先元素的边缘位置。

下面是一个示例，演示了如何使用粘性定位将一个元素固定在页面顶部：

<!DOCTYPE html>
<html>
了解本专栏 订阅专栏 解锁全文
CSS 3.0粘性定位的妙用
分享前端工程化、动效魔法与性能之舞！
06-04 554
position:sticky是 CSS 3.0新增的定位属性，可以说是相对定位relative和固定定位fixed的结合，它主要用在对scroll事件的监听上，简单来说，在滚动过程中，元素距离其父元素的距离达到sticky粘性定位的要求时，效果会变成fixed定位，固定到适当位置，下面给大家看一个效果。 这个属性用的概率比较小，不过在特定的场合，它真是个好东西，不用写那么复杂的JS，以下是代码实现。 <!DOCTYPE html> <html lang="en"> &l
css3学习笔记(新增功能，粗略版本)
01-30
- **粘性定位 (`position: sticky`)**：在特定范围内表现得像相对定位，超出范围后表现为固定定位。 #### 浮动与布局 - **浮动 (`float: left` 或 `right`)**：允许元素向左或向右移动，周围的文本或其他元素可以...
容易忽视的CSS3粘性定位position sticky
weixin_45709829的博客
03-26 2842
CSS3粘性定位position sticky 一、介绍 css3中新的定位属性，本身也具有定位元素的属性 理解为相对定位position:relative + 固定定位position:fixed的混合体 position:sticky粘性定位，基于用户的滚动定位 二、基本原理 依赖用户的滚动定位，行为像position:relative，当页面滚动超出目标区域，行为表现为position:fixed 什么是目标区域 相对父元素，超出阈值，这个阈值通过top、left、right、bottom确定 滚动元
速通前端 CSS：粘性定位（Sticky）实战，轻松实现吸顶效果
最新发布
udhgjvmlss的博客
10-21 305
是CSS中最被低估的属性之一，用极简代码解决了传统固定定位的布局断裂问题。下次实现吸顶效果时，不妨丢掉JavaScript，拥抱这行优雅的CSS魔法！动手练习顶部导航（滚动50px后吸顶）侧边栏（距离顶部100px粘附）页脚促销条（滚动到底部时弹出）
CSS粘性定位
m0_46744635的博客
08-21 908
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS粘性定位</title> <style> .bod...
position: sticky 黏性定位 兼容性css3
muzidigbig的博客
02-18 4089
position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。 position: fixed 相对于某个父元素进行定位 position: fixed的基准参照对象能修改吗？
CSS全面精通教程：电子教案演示
5. **CSS3新增特性**： - 渐变（Gradients）：线性渐变、径向渐变。 - 阴影（Shadows）：文本阴影、盒阴影。 - 转换（Transforms）：2D转换和3D转换，包括旋转、缩放、倾斜、移动等。 - 动画（Animations）：...
CSS2.0中文手册：样式表快速索引与注释
- 定位（position）：相对定位、绝对定位、固定定位和粘性定位四种定位方式，允许更精细地控制元素的布局。 6. CSS的高级特性 - CSS选择器：包括子选择器、相邻兄弟选择器、属性选择器等。 - CSS伪类和伪元素：...
中文版CSS3.0全面参考手册：布局、定位及规范讲解
CSS3在此基础上进行了扩展，新增了“粘性定位”（Sticky Positioning），它结合了相对定位和固定定位的特点，在元素达到指定位置时固定住元素，其余时间则像相对定位一样。 ### 边界（Margin） 边界是CSS布局中...
css3 position定位—— sticky 定位
weixin_48813932的博客
03-24 1696
当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
CSS粘性定位(sticky)
前行,学习
06-04 1万+
原理 元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。(relative) 元素定位在跨越特定阈值后为固定定位。(fixed) 失效的情况 没有top, right, bottom 或 left 之一(这不是废话吗…) 浏览器兼容(看控制台) 父元素的overflow属性值为：hidden / auto / scroll body的height:100% ...
CSS粘性定位 position:sticky
zoro的博客
02-11 1311
在研究rem布局时，无意中看到网易新闻移动端首页的导航栏用上了一个CSS 3的属性粘性定位position:sticky，它是相对定位（position:relative）和固定定位（position:fixed）的混合。 使用它，我们不再用监听scroll事件，即可实现导航栏滚动绝对定位的效果。 网易新闻首页效果 基本用法 nav{ position:sticky; top:10p...
css3 粘性固定 position:sticky
岁月清浅， 不落痕迹
11-23 704
当我们在使用css3对我们的网页进行修饰的时候，你有没有过这种场景在一个希望不用监听scroll事件，导航栏实现滚动绝对定位的效果。 .nav{ position:sticky; top: 80px} 当viewport 视口滚动到 元素距离小于设置的80px的时候，元素属于相对定位relative， 当viewport 视口滚动到元素距离大于设置的80px的时候，元素此时属于绝对定位absol...
css粘性定位
m0_71311743的博客
10-27 638
（Sticky positioning）是一种CSS定位方式，用于使元素在滚动过程中保持在相对于其最近的具有滚动机制的祖先元素内的固定位置。与固定定位（Fixed positioning）不同，粘性定位在滚动到一定位置时会脱离固定状态，继续随滚动进行。粘性定位的元素会在滚动到特定阈值时开始固定，并在滚动到另一个阈值时解除固定状态。1. 父元素没有设置滚动机制：粘性定位需要相对于具有滚动机制的祖先元素进行定位。3. 元素被其他元素覆盖：如果粘性定位的元素被其他元素覆盖，那么粘性定位可能会失效。
CSS：粘性定位
听海边涛声
08-06 827
CSS：粘性定位
【趣味CSS3.0】粘性定位属性Position:sticky是不是真的没用了？
极客小俊
01-24 1183
难道用你的口水去黏住它吗! =￣ω￣=
【前端】 CSS position粘性定位的用法、兼容问题及解决方案
weixin_45208537的博客
01-10 2384
粘性定位（sticky）是一种根据用户的滚动位置来决定元素定位方式的CSS属性值。它结合了相对定位和固定定位的特点。
CSS：深入理解粘性定位 position: sticky
热门推荐
weixin_43932309的博客
05-02 1万+
粘性定位尝鲜，祖先元素的overflow和height对结果的影响。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值