fixed与sticky的区别

最新推荐文章于 2024-12-16 10:02:26 发布
最新推荐文章于 2024-12-16 10:02:26 发布
阅读量491 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/lchcomcn/p/9846324.html
本文深入探讨了CSS中Sticky定位的特性与应用，解释了Sticky定位如何结合Relative与Fixed定位的优点，实现元素在滚动到特定位置时固定显示的效果。粘性定位的元素在未达到阈值前表现为相对定位，越过阈值后则转为固定定位，直至到达父元素边界。

Sticky可以使用参数，是位置跟relative使用参数的效果是一致的，都是相对于static的变化；sticky具有“滚动机制”。

sticky定位可以被认为是relative和fixed的混合。粘性定位的元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定的，直到它到达其父母的边界。

 

 

    出自-鬼木25

转载于:https://www.cnblogs.com/lchcomcn/p/9846324.html

【高频考点精讲】CSS定位全解析：static、relative、absolute、fixed、sticky的区别和应用场景
全栈老李的博客
05-05 989
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。今天咱们聊聊CSS定位这个看似简单实则暗藏玄机的话题。我是全栈老李，一个在代码海洋里摸爬滚打多年的老司机。定位(position)这个属性，表面上看就几个值，但用起来却能让不少新手掉坑里。不信？咱们慢慢聊。
JS解决position:sticky的兼容性问题的方法
11-30
CSS部分主要负责样式设置，确保`sticky-warp`的背景色与`sticky`层一致，以平滑过渡，并根据用户的定制调整高度和顶部位置。 ```css .sticky { width: 100%; } .sticky-warp { width: 100%; background: ...
简单理解sticky定位与fixed定位的区别
qq_53722426的博客
10-20 5297
fixed:固定定位，相对于可视窗口定位，一但使用top，left绑定后，无论怎么滚动可视窗口区域（也就是滑动滚动条），它的位置都不会发生变化 sticky:粘性定位，相当于是相对定位和固定定位的结合，既有相对定位的保留自己原来位置的特点又有固定定位相对于可视窗口定位的特点，必须至少含有top，left，right，bottom中一个进行绑定，比如说position:sticky top:100px; margin-top:400px 那么就是说这个小盒子初始情况距离顶部400px，在向下滚动30...
sticky和fixed
aiua81263的博客
10-17 199
sticky保留文档普通流定位 相对于最近的scrolling祖先和containing block偏移 fixed脱离文档普通流进行定位 相对于viewport建立的初始的容纳它的block进行定位 转载于:https://www.cnblogs.com/kazama/p/9803755.html...
CSS position定位（fixed、sticky）
大圣归来圣骑士清欢的博客
12-27 1127
CSS position定位（fixed、sticky）
position的sticky与fixed 及固定上部分页面 使用举例
huiguoyuan的博客
06-07 1080
position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。第二点则需要考虑父容器的高度情况：sticky元素在到达父容器的底部时，则不会再发生定位，如果父容器高度并没有比sticky元素高，那么sticky元素一开始就达到了底部，并不会有定位的效果。可通过z-index进行层次分级。
前端项目-fixed-sticky.zip
09-02
在前端开发领域，"fixed-sticky" 是一个常见的概念，主要涉及到网页布局和用户体验优化。这个压缩包"fixed-sticky.zip"很可能包含了一个前端项目，该项目着重于实现元素的固定定位（fixed positioning）和粘性定位...
fixed和sticky的区别
04-26
fixed和sticky都是CSS中的定位方式，但是它们有不同的使用方式和实现效果。 fixed：元素的位置相对于浏览器窗口固定，不随页面滚动而改变。比如：网页顶部的导航栏、返回顶部按钮等。 sticky：元素初始位置是很...
js fixed和sticky
最新发布
08-28
在JavaScript里，`fixed`和`sticky`并非直接的概念，它们属于CSS的定位属性。不过，JavaScript可用于控制和操作应用了`fixed`和`sticky`定位的元素。 ### 使用 - **fixed定位**：借助CSS把元素的`position`属性设为...
固定定位（fixed）和粘性定位（sticky）的比较
weixin_51093047的博客
09-18 2662
了解fixed和sticky的区别
布局fixed和sticky
anlin9217的博客
10-12 185
sticky非常非常非常好用怎么用看代码： 这里为什么没有设置高度呢，因为这个高度应该是浏览器高度，浏览器高度在时刻变化怎么办？ js处理： 此JS里面会有执行方法一步一步看 这个里面有JS方法 这个就是最关键的了，第一次拿到浏览器的高度$(window).height()利用resize(function(){})函数每次变化都赋予新的高度。ok! stic...
fixed和sticky
weixin_30467087的博客
10-23 128
1 <!DOCTYPE html><html> 2 <head> 3 <meta charset="utf-8"> 4 <title>fixed和sticky</title> 5 <style type="text/css"></style> 6 ...
fixed定位和sticky定位
baocheng7880的博客
09-17 848
fixed定位 使元素完全脱离文档流 使内联元素支持宽高（使内联元素具有块属性） 使块元素默认宽根据内容决定（让块具备内联的特性） 相对于整个浏览器进行偏移，不受滚动条的影响 stick定位 在指定的位置进行粘性操作，需要配合left,right,top,bottom使用， 光使用position:stick；无效。 转载于:https://www.cnblo...
css定位: fixed和sticky
Motion_zq的博客
09-23 526
css定位: fiexd和sticky bfc
CSS定位 相对定位(relative)、绝对定位(absolute)、固定定位(fixed)和粘性定位(sticky)
博观而约取，厚积而薄发~
12-16 453
就是将盒子定在某一个位置，按照一定的规则进行摆放盒子。规则是：定位 = 定位模式 + 边偏移。文档流，窗体自上而下分成一行一行，并在每行中按从左至右的顺序排放元素，即为文档流。只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和固定定位。定位模式，元素的定位方式，通过属性来实现，取值：1、static：默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）；2、relative。
理解CSS中的sticky与fixed定位
nbsaas-boot基于Request-Response的企业级快速开发框架
04-23 1024
在CSS中，和是两种常见的定位方式，它们可以让元素脱离文档流，并具有固定位置的效果。然而，它们在实际应用中有着不同的特点和使用场景。
前端之 position的fixed和sticky的区别，含页面小测试
x_i_a_o_b_a_i的博客
02-18 5493
position的fixed和sticky的区别 fixed相对于相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。不管视口如何滚动，它的位置始终不变。 fixed如果搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置。 <!DOCTYPE html> <html> ...
----关于posotion的sticky与fixed的区别----
weixin_30878501的博客
10-13 177
sticky 出现在正常流当中，不能设置定位，随页面滚动 （sticky = relative + fixed） fixed 不出现在正常流当中，能设置定位，随页面滚动 eg： html： 　　<p> 　　　　<div class="box" id="one">One</div> 　　　　<div class=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值