css position的sticky定位

position: sticky -粘性定位(是css新增的一个position属性)

使用注意事项：

父元素不能有 overflow 属性
left、top、right、bottom必须要设置一个
仅在父元素内生效，父元素的高度必须大于sticky元素设置的高度

简单理解就是，当你页面滚动的距离小于你设置的 left、top、right、bottom的值时
position: sticky 就相当于 position:relative

当你页面滚动的距离小于你设置的 left、top、right、bottom的值时

position: sticky 就相当于 position:fixed

代码展示：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">/*粘性定位，当用户滑动的距离超过top设置的值时，就相当于position:fixed定位当用户滑动的距离没超过top设置的值时，就相当于position:relative定位*/.csstricky{position: sticky;width: 30px;height: 30px;background: aqua;top: 50px;}#fs{height: 2000px;width: 100%;}#ad{height: 300px;width: 100%;background:black;}</style></head><body><div id="fs"><div id="ad"></div><div class="csstricky"></div></div></body>
</html>

当<div class="csstricky"></div>这个div距离顶部小于我们所设置的 50px 的时候，

position: sticky 就相当于 position:fixed ，div就会被固定在top：50px 的位置处

好啦，今天的学习就到这啦，文章有什么问题可以在评论区指正哦~❤️

css position的sticky定位相关推荐

CSS position: sticky; 粘性定位初识
之前所熟知的CSS position 属性值有relative.absolute.fixed,当然也不能忽略了static(默认)和inherit(继承). 偶然的一次在 MDN:https://d ...
CSS定位（position））之sticky 定位
sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位. position: sticky; 基于用户的滚动位置来定位. 粘性定位的元素是依赖于用户的滚动,在 position:relati ...
教你玩转CSS Position(定位)
目录 CSS Position(定位) static 定位 fixed 定位 relative 定位 absolute 定位 sticky 定位重叠的元素所有的CSS定位属性
CSS position(定位)属性
关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...
Canvas+html+css+position定位
定位Position样式浮动毛病: 会让出文档流,会影响后面的元素的布局. 如果父元素是width:100%,没办法做到均分宽度和间隙,如果父元素是固定宽度情况,可以通过切蛋糕的方式进行计算. 概述 ...
【css】CSS position(定位)属性
一.CSS position(定位)属性 absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位.元素的位置通过 "left", "t ...
css左边定位,CSS Position(定位) | 菜鸟教程
CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: 元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定po ...
CSS Position 定位
文章目录 CSS Position 定位 #1 说明 #1.1 什么是Position塌陷 #1.2 什么是文档流(normal flow) #2 开始 #2.1 position: static # ...
详解 CSS position定位的五种方式
position 属性规定应用于元素的定位方法的类型(static.relative.fixed.absolute 或 sticky). 常见的固定定位,例如手机端的导航,快捷按钮.例如本站的&quo ...

css position的sticky定位

css position的sticky定位相关推荐

最新文章

热门文章