css粘性定位sticky特性

最新推荐文章于 2023-12-27 11:17:47 发布
最新推荐文章于 2023-12-27 11:17:47 发布
阅读量169 收藏
点赞数
文章标签： css
原文链接：https://segmentfault.com/a/1190000007183209
版权

1、样式表 z－index 无效。行内 style 写有效
2、sticky 是容器相关的，也就说 sticky 的特性只会在他所处的容器里生效。再抽象出来就是top、bottom、left、right只相对他的父级容器而言。

吃香菜也吃西红柿
关注
css3学习---粘性定位sticky
wei_dan1129的博客
03-22 526
粘性定位设置 <div class="content"> <div class="sticky"></div> </div> .content{ height:3000px; } .sticky{ position: -webkit-sticky; position: sticky; top:0; z-index: 10;...
CSS 粘性定位position sticky 用法实践
毛祥明-Zoe
08-25 1672
CSS 粘性定位position sticky 用法实践sticky实际效果展示应用场景Note案例代码jsxless sticky css属性position为sticky的元素，根据正常的文档流（flow of the document）进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, b
粘性定位position:sticky
weixin_30879833的博客
08-09 206
原文：https://www.zhangxinxu.com/wordpress/2018/12/css-position-sticky/ 前些日子，我在小程序上使用了这个属性，经个人实践及思考，发现原文的如下片段有些问题，比如使用position:sticky的限制条件，当时没有及时总结，具体是什么我忘了，还需下次实践的时候补充。 转载于:https://www.cn...
关于sticky和z-index的几个小坑
weixin_52447755的博客
09-09 830
position：sticky 首先说说注意点 position:sticky; 设置top或left等定位 注意一般是给外层容器设置，当然也可以根据需求调整 神坑 某次我给设置了sticky的节点的兄弟节点设置了max-height，但是实际高度是大于最大高度的，这就会有划到一定高度后设置了sticky的节点不见了，所以要注意高度不能大于最大高度 z-index假失效 要注意设置z-index的节点背景色是不是透明的，不然真的要找很久bug，设置下背景色就好了
使用 position:sticky 实现粘性布局
qq_46617584的博客
09-01 177
使用 position:sticky 实现粘性布局
十分钟轻松搞懂CSS的五大定位方式！（建议收藏）
Erya Programming learning
05-31 2735
一、CSS之position定位方式 position 属性规定元素的定位类型，有以下五种： static relative absolute(脱离文档流) fixed（脱离文档流） sticky（新属性） 两种脱离正常文档流的定位方法，会把元素的宽高设置成内容的宽高 常用 top/bottom/left/right 属性进行偏移 1.static 静态定位，是position的默认值，可不设置。 默认布局方式，从上到下，从左到右，正常文档流。 position: static; 2.relative
详解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粘性定位
m0_46744635的博客
08-21 843
<!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粘性定位position:sticky问题采坑
06-28
CSS粘性定位（position:sticky）是一种新的定位方式，它可以在不同滚动位置下保留元素位置，使得页面更加直观。但是这种方式还存在一些采坑需要注意。 首先是浏览器兼容性问题。目前，不支持CSS粘性定位的浏览器...
前端css基础篇——position中能实现动态效果的sticky属性
weixin_44542562的博客
07-14 2867
position:sticky（粘性定位）简介 sticky是position属性中新添的一个属性，它可以说是fixed和relative的结合。它主要作用在scroll的监听上，在滚动过程中，当某元素的距离其父元素的距离达到设定的sticky值的时候，这时position：sticky的作用就相当于fixed固定定位，固定在适当的位置，不随滚动条的滚动而发生变化。 使用条件 父元素不能设置 overflow:hidden; 或者 overflow:auto; 属性； 必须制定 top、bottom
css吸顶(position: sticky；)
最新发布
空&白的博客
12-27 1212
解释下上面的效果：当元素tabs-s滑动到距离顶部60rpx的时候，会“固定”在那个地方，不会随着页面的向上滑动而滑动；但是向下滑动距离顶部小于60rpx的话，那元素tabs-s也会跟着向下滑动。用样式position: sticky;来做吸顶其实很简单，只要在设置一个top属性即可。
伪元素法简易遮罩层
weixin_55559151的博客
02-13 618
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl
ios (12.0.1) 中position: sticky属性，导致z-index属性失效
id_ip的博客
06-10 2524
在部分ios系统中(12.0.1) ，h5页面，在元素上设置position: sticky属性进行固定元素，会导致其z-index失效。 解决方法：可以将sticky值改为fixed
CSS3新增定位属性sticky，粘性定位
weixin_43915587的博客
04-05 1273
position:sticky sticky 英文字面意思是粘，粘贴。 这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。 什么是结合两种定位功能于一体呢？ 元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。 而后，元素...
HTML5中理解以及解决margin-top的塌陷问题
大数据-攻城狮
08-08 810
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &
position设置定位属性 absolute绝对定位 fixed固定定位 relative相对定位 sticky粘性定位 z-index设置定位元素的层叠顺序 锚点链接 透明
Lgw_zuiyouxiu的博客
07-17 806
1.position 设置定位属性 static 默认值，没有定位，静态定位，相对没有属性position属性的元素都是static定位 2.absolute 绝对定位 会使元素脱离文档流，不需要去解决 绝对定位会产生一个块级框，不管之前是何种元素，都可以设置宽高 包含块：根据距离其最近的具有定位设置的父元素进行位置的偏移， 静态定位除外，如果所有的父元...
CSS中容易被忽视的 position属性sticky
热门推荐
USTC-sparks
05-30 1万+
position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值...
实现移动端的 css stickyfooter
落日夕霞的博客
11-30 344
描述：在移动端经常有这样的效果，当页面内容高度不足视口高度时footer固定在底部，而页面内容高度高于视口高度时，footer随内容向下移动。 方法一: 使用 calc 实现（不推荐） // html &amp;amp;lt;body&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;container&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&a
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值