css 粘性布局

最新推荐文章于 2024-03-14 00:15:00 发布
最新推荐文章于 2024-03-14 00:15:00 发布
阅读量1w 收藏 6
点赞数 1
分类专栏： CSS 文章标签： css sticky
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SJ1551/article/details/109404667
版权
一、粘性布局
  1. position: sticky 配合 [left, right, top, bottom] 中一个即可实现粘性布局
二、坑
  1. 粘性布局只在其父元素空间内生效，且要实现 “粘性” 效果，对其父元素有以下要求，否则粘性效果会失效
    （1）必须满足父元素在需要粘的轴上的空间 > 粘性布局子元素在需要粘的轴上的大小（例如子元素设置top/bottom粘垂直轴，父元素的高度需要大于子元素的高度，这样才有可以活动的空间嘛）
    （2）父元素中不能设置 overflow: hidden 或 overflow: auto
  2. 未同时设置 [left, right, top, bottom] 中一个会使得粘性效果消失
  3. sticky 粘性效果失效时，其表现与 relative 差不多
Novice-XiaoSong
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
72_粘滞定位（根据用户的滚动位置进行定位）
述安的博客
08-20 367
position: sticky;粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置。
CSS使用position:sticky 实现粘性布局的方法
12-14
简介 前面写了一篇文章讲解了position常用的几个属性：《CSS基础篇– position属性讲解》 一般都知道下面几个常用的： { position: static; position: relative; position: absolute; position: fixed; } 在https://developer.mozilla.org/zh-CN/docs/Web/CSS/position还说了下面这三个值： /* 全局值 */ position: inherit; position: initial; position: unset; 估计大部分都没有用过position
CSS 粘性布局sticky：使用方法+代码示例
最新发布
大剑师兰特的GIS世界
03-14 2177
CSS 中的 `position: sticky` 是一种混合了相对定位（relative positioning）和固定定位（fixed positioning）特性的定位模式。当一个元素设置了 `position: sticky` 后，它在正常文档流中的行为类似于相对定位，但在满足特定滚动条件时，它会变为相对于其最近的滚动祖先（通常是带有滚动条的父容器，如果没有这样的祖先，则相对于视口）固定在某个位置。
实现粘性布局position:sticky
浮游的博客
03-07 1273
对于粘性定位这个概念，很多人都没有注意到，所以写这篇文章总结一下。粘性定位它基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative;而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。如果问，CSS 中 position 属性的取值有几个？大部分人的回答是，大概是下面这几个吧？
粘性布局 以及粘性布局失效问题
paidaboluo的博客
07-27 2791
粘性布局 以及粘性布局失效问题
CSS定位（position））之sticky 定位
Serena_tz的博客
02-25 2333
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。 position: sticky; 基于用户的滚动位置来定位。 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 这个特定阈值指的是 top, right, bo
css实现粘性布局
竹叶轻拂水
09-23 1165
使用css实现粘性布局，需要满足三个条件： 1、需要粘性布局的盒子，必须是父元素的直接子元素 2、父元素要有固定的高度 3、需要粘性布局的盒子使用position: sticky;属性，如果需要走到一定高度就固定的话，可以使用top属性 ...
几种常见的CSS三栏布局？介绍下粘性布局（sticky）？自适应布局？左边宽度固定，右边自适应？两种以上方式实现已知或者未知宽度的垂直水平居中？
星辰迷上大海的博客
01-06 1074
使用Flexbox布局 优点： 简单、直观，能够轻松实现左右布局，且支持响应式设计。 缺点： 对于一些较老版本的浏览器支持不够完善，需要额外处理兼容问题。
position:sticky 实现粘性布局
11-16
css 样式 position:sticky 实现粘性布局
CSSLayouts:尝试不同的 css 布局。 用 Sass 编写
06-02
CSS 布局尝试不同的 CSS 布局粘性页脚（纯 css。无绝对/浮动）
skeleton_sticky_footer:Skeleton 2.0.4基本示例的最小增强版本，带有粘性页脚
05-07
如果您正在阅读本文，那么您可能已经找到了 ，它是超轻量级的基于网格的布局。 您可能还发现Skeleton非常轻巧，即使页面内容很短，对页脚的跨浏览器支持也不会保留在页面底部。 该存储库包含Skeleton 2.0.4附带的...
css粘性布局_CSS“位置：粘性” –简介和Polyfills
08-14 318
css粘性布局 如果您已阅读Annarita Tranfici的文章“ 显而易见的设计总是赢家”，则您可能会同意她的说法： 人们希望看到常见的模式：在页面顶部找到主菜单，在右上角找到搜索框，在底部找到页脚，依此类推。 我同意人们期望将网站的某些组件放置在特定位置，并且我认为，在主菜单中，这一点更为真实。 有时，由于客户的请求或我们已经确定这是最好的方法，我们可能要求主导航在页面上始终保...
粘性布局之固定表头
katherin_wanzi的博客
03-29 765
一、粘性布局 position: sticky 配合 [left, right, top, bottom] 中一个即可实现粘性布局 粘性布局只在其父元素空间内生效，且要实现 “粘性” 效果，对其父元素有以下要求，否则粘性效果会失效 必须满足父元素在需要粘的轴上的空间 > 粘性布局子元素在需要粘的轴上的大小（例如子元素设置top/bottom粘垂直轴，父元素的高度需要大于子元素的高度，这样才有可以活动的空间嘛） 父元素中不能设置 overflow: hidden 或 overflow: auto 未同
粘性布局position:sticky
weichen913的博客
01-04 614
开篇： 页面开发中常用到固定定位fixed，不过fixed会浮动脱离文档流，于是又要清除浮动，即麻烦有时又未必能够清除浮动，于是sticky华丽出场 介绍： sticky是CSS3中新增的position属性，设置了sticky的元素，在屏幕范围（viewport）内该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变
position:sticky；粘性布局
CodingNoob
12-06 2381
生效规则 position:sticky的生效是有一定的限制的，总结如下： 须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。 并且top和bottom同时设置时，top生效的优先级高，left和right同时设置时，left的优先级高。 设定为position:sticky元素...
使用 position:sticky 实现粘性布局
weixin_34143774的博客
02-15 1210
如果问，CSS 中 position 属性的取值有几个？大部分人的回答是，大概是下面这几个吧？ { position: static; position: relative; position: absolute; position: fixed; } 额，其实，我们还可以有这 3 个取值： { /* 全局值 */ p...
粘性布局
weixin_30660027的博客
10-24 216
那个大牛 的博客写的很详细 转载于:https://www.cnblogs.com/hellobeen/p/9842722.html
导航栏黏性布局
weixin_33847182的博客
04-17 493
（目前手机不多等待日后更新）position:sticky 可以实现，目前测试下来iphone可以完美兼容安卓手机在近两年发行的手机里兼容性目前效果也理想目前测试华为met7及以下、魅族15PLUS 、红米not3不兼容小米max2s可以（小米手机现在不多） 转载于:https://juejin.im/post/5cb6efdf51882532bd4b6256...
position粘性布局
04-30
Position粘性布局是CSS中一种常用的布局方式，它能够使元素在滚动时“粘”住某个位置不动，同时在滚动到达一定页面位置时又能够切换为fixed或static布局，是一种非常实用的布局方式。 position粘性布局是通过CSS中的position属性实现的，该属性有以下四个值： - static：默认值，表示没有设置定位 - relative：相对定位，在元素原本的位置基础上进行调整，不会影响其他元素 - absolute：绝对定位，相对于最近的已定位父元素进行定位，如果没有已定位的父元素，则相对于文档进行定位 - fixed：固定定位，在浏览器窗口固定位置不动，不随页面滚动而移动 当position属性值为sticky时，元素会在滚动到指定位置时“粘”住，不会跟随滚动而移动，但是不会改变占据的空间大小。当滚动到达某个阈值时，元素又会切换为fixed布局，固定在页面上。 position粘性布局在导航栏、侧边栏等元素上应用广泛，能够提升用户体验，使页面更加直观、易用。但是需要注意，这种布局方式的兼容性并不是很好，尤其是在移动端的兼容性问题较为突出，需要仔细测试和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值