CSS粘性定位(sticky)

最新推荐文章于 2024-05-20 20:46:24 发布
原创 最新推荐文章于 2024-05-20 20:46:24 发布 · 1.2w 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #html5 #css3 #css

本文深入解析CSS中元素的定位机制，包括相对定位、固定定位的工作原理及触发条件，探讨了定位失效的情况，如缺少定位坐标、父元素overflow属性的影响及body高度设置。适合前端开发者深入了解布局细节。

原理

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

失效的情况

  1. 没有top, right, bottom 或 left 之一(这不是废话吗…)
  2. 浏览器兼容(看控制台)
  3. 父元素的overflow属性值为：hidden / auto / scroll
  4. body的height:100%
CSS3新增的特性：粘性定位
LogicGuruX的博客
10-04 225
CSS3中引入了许多新的特性和功能，其中之一就是粘性定位。粘性定位是一种介于相对定位和固定定位之间的定位方式，它允许元素在滚动时保持在页面上的特定位置。本文将详细介绍粘性定位的用法，并提供相应的源代码示例。
详解position: sticky粘性定位
最新发布
橘猫吃不胖的博客
01-20 1638
深入了解sticky属性值与粘性定位 1 前言 1 可滚动元素对粘性定位的影响 2 理解粘性定位的计算规则 3 理解粘性定位的堆叠规则 4 其他
【转贴】CSS Sticky Footer: 完美的CSS绝对底部
weixin_34367257的博客
02-21 221
  原贴地址：http://parandroid.com/css-sticky-footer/   在帕兰映像中看到一篇好文，将它转贴到这儿。 CSS的简单在于它易学，CSS的困难在于寻找更好的解决方案。在CSS的世界里，似乎没有完美这种说法。所以，现在介绍的CSS绝对底部，只是目前个人见过的方案中比较完美的吧。 先说我们为什么会使用到这个CSS底部布局解决方案: 当做...
CSS Sticky
JunChow
06-18 626
position:sticky; sticky原意为“粘贴的”，属于CSS3中position定位属性新增的一个属性值，称之为粘性定位，它是结合relative相对定位和fixed固定定位于一体的特殊定位方式，适用于某些特殊场景比如sticky footer。 例如：设置sticky的元素默认定位方式为relative，当它的位置超过指定阈值时定位方式会自动切换为fixed，直到父级元素离开屏幕...
CSS 粘性布局sticky：使用方法+代码示例
大剑师兰特的GIS世界
03-14 7575
CSS 中的 `position: sticky` 是一种混合了相对定位（relative positioning）和固定定位（fixed positioning）特性的定位模式。当一个元素设置了 `position: sticky` 后，它在正常文档流中的行为类似于相对定位，但在满足特定滚动条件时，它会变为相对于其最近的滚动祖先（通常是带有滚动条的父容器，如果没有这样的祖先，则相对于视口）固定在某个位置。
css中的sticky属性
xiangyizhixuexi的博客
07-14 5777
position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。 使用： #sticky-nav { position : sticky ; top : 100px ; } 设置position:sticky同时给一个(top,botto
详解CSS粘性定位 sticky
12-11
CSS粘性定位（sticky positioning）是CSS布局中的一种特性，它允许元素在用户滚动页面时在特定条件下保持可见。在CSS中，`position: sticky`是实现这一效果的关键。这个属性可以看作是`static`（无定位）和`fixed`...
详解css粘性定位position：sticky问题采坑
12-14
<div id="sticky-nav">这是一个tab切换栏，给sticky定位top=100px 发生滚动 ;">发生滚动 ``` 在实际项目中，可能会遇到兼容性问题。例如，在某些Android设备或小程序环境中，`position: sticky`可能存在点击穿透和...
css粘性定位position:sticky
浩星
08-10 2511
前言： css3中有一个很有趣的属性position:sticky，粘性属性，效果是一个吸顶效果，可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时 (比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。 ***注意，这个兼容性特别不好 效果图： 基本用法： nav{ position:st...
css定位方式之粘性定位元素，使用场景课程表或者财务报表或者活动表格，固定表头和左侧label显示
05-20 729
元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和（最近块级祖先 nearest block-level ancestor），包括 table-related 元素，基于toprightbottom和left的值进行偏移。偏移值不会影响任何其他元素的位置。该值总是创建一个新的注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow是hiddenscrollauto或overlay。
JS解决position:sticky的兼容性问题的方法
10-19
本篇文章主要介绍了JS解决position:sticky的兼容性问题的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
hc-sticky：JavaScript库，可在滚动时使页面上的任何元素可见
02-04
HC-粘 JavaScript库，可在滚动时显示页面上的任何元素。 无依赖关系，但lso可以用作jQuery插件。 查看。 快速开始 安装 该软件包可以通过以下方式安装： ： npm install --save hc-sticky 或下载。 包括HC-Sticky 脚本标签 < script src =" /path/to/hc-sticky.js " > </ script > Webpack /浏览器修饰 在脚本中，包括HC-Sticky的代码通常如下所示： const hcSticky = require ( &#39;hc-sticky&#39; ) ; 巴别塔 import hcStic
CSS粘性定位
m0_46744635的博客
08-21 912
<!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...
css经典布局系列四——粘连（css sticky footer）布局
weixin_34186931的博客
04-21 661
什么是粘连布局（css sticky footer） 当main的高度足够长的时候，紧跟在<\main>后面的元素<\footer>会跟在其后面; 当<\main>元素比较短的时候（比如小于屏幕的高度），我们期望这个<\footer>元素能够“粘连”在屏幕的底部。 三个组成部分：wrap容器,main内容,footer脚部 方法一：...
2020-11-05 css实例：粘性定位及样式解释
Amanda&Rachel的博客
11-05 424
粘性定位 粘性定位是相对定位和固定定位的混合，给盒子设置一个偏移量，未到达该偏移量时是相对定位，到达偏移量时是固定定位。 css实例粘性定位 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ /*重置样式*/ margin: 0; padding
css3 position定位—— sticky 定位
weixin_48813932的博客
03-24 1712
当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
容易忽视的CSS3粘性定位position sticky
weixin_45709829的博客
03-26 2956
CSS3粘性定位position sticky 一、介绍 css3中新的定位属性，本身也具有定位元素的属性 理解为相对定位position:relative + 固定定位position:fixed的混合体 position:sticky粘性定位，基于用户的滚动定位 二、基本原理 依赖用户的滚动定位，行为像position:relative，当页面滚动超出目标区域，行为表现为position:fixed 什么是目标区域 相对父元素，超出阈值，这个阈值通过top、left、right、bottom确定 滚动元
CSS——sticky定位
weixin_43599321的博客
12-08 2398
粘性定位通俗来说，它就是相对定位relative和固定定位fixed的结合体，它的触发过程分为三个阶段
CSS粘性定位详解与实际应用示例
粘性定位（`position: sticky`）是CSS中一种非常实用且灵活的定位方式，广泛应用于现代前端开发中，尤其在构建具有动态交互效果的网页布局时表现出色。它结合了相对定位（`position: relative`）和固定定位（`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值