CSS的粘性定位sticky可以起到吸顶灯的作用，用法如下

<body>

<div>

<nav style="postion:sticky; top: 0;">

</div>

<div><div>

</body

但是我在一次实践中使用该属性把导航栏做成吸顶灯效果时，却无法实现。经过一番操作后，我终于发现了问题所在，那就是

sticky 的作用范围只在父元素之内，父元素的兄弟元素会忽略这个属性，把吸顶的元素顶上去

例如下面的代码中，因为nav已经是父元素header的最后一个元素，所以nav虽然有sticky的属性，但是没有发挥的空间。

修改代码，把nav和main放在同一个父元素内即可让sticky发挥作用

转载：https://blog.csdn.net/qq_45806009/article/details/116520670

亲测 有效！

关于CSS的粘性定位sticky失效问题的更多相关文章

  1. 粘性定位 sticky

    position:sticky  粘性定位 top:200px 这是他的阈值,意思是当我们页面滚动到 200 像素的使用,我们的元素会自动变成固定定位,不到200像素的时候,我们的元素走的是相对定位 ...

  2. CSS粘性定位

    粘性定位(position:sticky) 1.定义 粘性定位可以被认为是相对定位和固定定位的混合.元素在跨越特定阈值前为相对定位,之后为固定定位.(MDN传送门) 这个特定阈值指的是 top, ri ...

  3. position:sticky 粘性定位的几种巧妙应用

    背景:position: sticky 又称为粘性定位,粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换.元素根据正常文档流进行 ...

  4. sticky -- position定位属性sticky值之粘性定位；

    sticky简述 sticky 是css定为新增的属性:可以说是相对定位relative和固定定位fixed的结合: 它主要用在对scroll事件的监听上,简单说在滑动过程中,某个元素的距离其父元素的 ...

  5. sticky，粘性定位

    position:sticky,粘性定位:可以说是relative和fixed的结合: 滑动过程中,元素在显示窗口内则在其本身的位置,超出元素所在位置则显示在设定的sticky位置. 使用: #id ...

  6. 【CSS】position(定位)属性

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...

  7. CSS Position（定位）

    CSS Position(定位) 一.CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed ab ...

  8. Css五种定位之间的区别

    ##CSS 定位机制## CSS 有三种基本的定位机制:普通流.浮动流和定位流. 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定. 块级 ...

  9. CSS学习摘要-定位

    CSS学习摘要-定位 注:全文摘自MDN-CSS定位 定位允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置. 本文解释的是定位 ...

随机推荐

  1. Vulnstack内网靶场2

    环境配置 内网2靶场由三台机器构成:WIN7.2008 server.2012 server 其中2008做为对外的web机,win7作为个人主机可上网,2012作为域控 网络适配器已经设置好了不用自 ...

  2. MyBatis原生批量插入的坑与解决方案！

    前面的文章咱们讲了 MyBatis 批量插入的 3 种方法:循环单次插入.MyBatis Plus 批量插入.MyBatis 原生批量插入,详情请点击<MyBatis 批量插入数据的 3 种方法 ...

  3. python 类中的公有属性 私有属性 实例属性

    class parent(): i=1 __j=2 class child(parent): m=3 __n=4 def __init__(self,age,name): self.age=age s ...

  4. pagelayout中边界灵敏度动画时间kv

    <PageLayoutWidget>: # 默认是50dp 设置边界 border:'100dp' # 默认哪一页 page:2 # 设置翻页动画及持续时间 anim_kwargs:{'d ...

  5. PinPoint单节点部署及客户端配置方法

    在一次做项目中,需要涉及全链路压测,为了更好定位链路中某一节点可能会出现的问题,在繁忙之余,快速部署及应用了该链路工具,分享给大家~ 话不多说,开始部署~ 一.环境配置1.1 获取需要的依赖包进入ho ...

  6. Less3

    继续第三关的学习 1.根据第一关的记录,我们判断出是什么注入 id=1' and '1'='1 id=1' and '1'='2 返回不同,所以存在字符型的注入 2. 这时候我们再用正常的报错猜解准备 ...

  7. 【代码更新】单细胞分析实录(20): 将多个样本的CNV定位到染色体臂，并画热图

    之前写过三篇和CNV相关的帖子,如果你做肿瘤单细胞转录组,大概率看过: 单细胞分析实录(11): inferCNV的基本用法 单细胞分析实录(12): 如何推断肿瘤细胞 单细胞分析实录(13): in ...

  8. Edge屏蔽CSDN （必应）

    国内的中文论坛都一样的烂(博客园除外),CSDN和微博只是烂的方式不一样.当你想找解决方法的时候却发现搜索出来的结果是同一篇文章被n个人投了n遍,查询内容不仅不能解决问题,还浪费了大量时间.这几天偶尔 ...

  9. conda无法导入，pip可以导入

    在conda中创建测试的虚拟环境 进入test虚拟环境,输入命令:conda install keras 输入命令python,进入python环境,输入import keras 返回错误,No mo ...

  10. Redis源码分析（dict）

    源码版本:redis-4.0.1 源码位置: dict.h:dictEntry.dictht.dict等数据结构定义. dict.c:创建.插入.查找等功能实现. 一.dict 简介 dict (di ...