图文详解Excel中XLOOKUP函数典型用法整理(xlookup使用方法及实例)
946
2022-05-30
今天被人问到position:sticky的使用,由于css这块特效做的不多.深知自己的短板.于是痛定思痛.决定好好积累遇到的css问题
先说一下sticky这个属性的定义
sticky:
元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
MDN是这么解释的.专业性有点强,可能不太好理解.但如果说它的最长的用途,大家都知道,那就是吸顶固定.
就是下面这个效果
该值总是创建一个新的层叠上下文(stacking context)。注意,一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时),即便这个祖先不是真的滚动祖先。这个阻止了所有“sticky”行为(详情见Github issue on W3C CSSWG)。
简单说,就是在一个滚动的容器里,将一个子元素设置为postion:sticky 在元素显示在视口中时,显示的效果与relative 一致
当元素被滑动出视口外是,显示效果与fixed一致
CSS
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。