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. 2021.1.23--vj补题

    B - B CodeForces - 879B n people are standing in a line to play table tennis. At first, the first tw ...

  2. Winform同步调用异步函数死锁原因分析、为什么要用异步

    1.前言 几年前,一个开发同学遇到同步调用异步函数出现死锁问题,导致UI界面假死.我解释了一堆,关于状态机.线程池.WindowsFormsSynchronizationContext.Post.co ...

  3. 更好的 java 重试框架 sisyphus 的 3 种使用方式

    回顾 我们前面学习了 更好的 java 重试框架 sisyphus 入门简介 更好的 java 重试框架 sisyphus 配置的 2 种方式介绍 更好的 java 重试框架 sisyphus 背后的 ...

  4. Java：Object对象小记

    Java:Object对象小记 对 Java 中的 Object 对象,做一个微不足道的小小小小记 Object 的常用方法有哪些 clone() 方法:用于创建并返回当前对象的一份拷贝: 在Java ...

  5. EasyX安装教程

    Easyx是什么 就是一款可以在Windows里让你的C++程序里显示图片等的工具. 注意:EasyX不支持Linux.MacOS.不过还有Qt等可以选择. 安装VC/VS Easyx只支持Visua ...

  6. python re:正向肯定预查(?=)和反向肯定预查(?<=)

    参考资料:https://tool.oschina.net/uploads/apidocs/jquery/regexp.html (?=pattern) 正向肯定预查,在任何匹配pattern的字符串 ...

  7. Cesium实现右键框选

    思路 1.先取消地图的右键事件 2.右键框选事件,屏幕坐标转为经纬度坐标 取消地图的右键事件 //此处容易犯一个错误:以为右键事件绑定了缩放功能,伪代码即 Cesium.MouseEvent.右键事件 ...

  8. 挂载iscsi存储

    参考连接:https://segmentfault.com/a/1190000005853387?utm_source=tag-newest 安装客户端工具,iscsi-initiator yum i ...

  9. 【pycharm】Python pip升级及升级失败解决方案，报错：You are using pip version 10.0.1, however version 21.3.1 is available. You should consider upgrading via the 'python -m pip install --upgrade pip' command.

    我已经升级到了最新的版本 安装其他模块过程中出现下面提示,便说明你需要升级pip You are using pip version 10.0.1, however version 21.3.1 is ...

  10. JMeter跨线程组保持登录（多线程组共享cookie）

    使用__setProperty设置全局变量: 1.jmeter中创建一个登录请求,然后执行,察看结果树-->查看返回cookie信息,我的是在Response data中的 Response h ...