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. [spring-rabbit]自动配置原理

    1 一个简单的示例 在Spring Boot项目中使用spring-rabbit时,需要经过以下几个步骤: 引入依赖. 配置基本连接信息. 创建消息发布者,并发送消息. 创建消息消费者,监听消息并处理 ...

  2. 蝉知CMS 7.X XSS漏洞复现

    个人博客地址:xzajyjs.cn 作为一个开源的企业门户系统(EPS), 企业可以非常方便地搭建一个专业的企业营销网站,进行宣传,开展业务,服务客户.蝉知系统内置了文章.产品.论坛.评论.会员.博客 ...

  3. 内网渗透DC-1靶场通关(CTF)

    最新博客见我的个人博客地址 DC系列共9个靶场,本次来试玩一下DC-1,共有5个flag,下载地址. 下载下来后是 .ova 格式,建议使用vitualbox进行搭建,vmware可能存在兼容性问题. ...

  4. 【UE4 C++】播放声音、特效

    播放声音 PlaySoundAtLocation() USoundCue* HitSound = LoadObject<USoundCue>(this, TEXT("SoundC ...

  5. HCNP Routing&Switching之BGP防环机制和路由聚合

    前文我们了解了BGP路由宣告相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15440860.html:今天我们来聊一聊BGP防环机制和路由聚合相关话题 ...

  6. gridlayout在kv中的引用

    from kivy.app import App from kivy.uix.gridlayout import GridLayout class GridLayoutWidget(GridLayou ...

  7. 第31篇-方法调用指令之invokevirtual

    invokevirtual字节码指令的模板定义如下: def(Bytecodes::_invokevirtual , ubcp|disp|clvm|____, vtos, vtos, invokevi ...

  8. 在浏览器上开发GO和Vue！(基于code-server)

    在浏览器上开发GO和Vue!(基于code-server) 曾几何时,开发者们都被安装编程环境苦恼,尽管现在很多语言的开发环境已经不难装了,但是如果我们能有一个运行在云端的编译器,那么我们就可以随时随 ...

  9. C# 如何将日期格式化ISO8601模式

    类似于这样的时间戳格式:预计来访时间,时间参数需满足ISO8601格式:yyyy-MM-ddTHH:mm:ss+当前时区,例如北京时间:2018-07-26T15:00:00 + 08:00 stri ...

  10. 斐波那契数列 牛客网 剑指Offer

    斐波那契数列 牛客网 剑指Offer 题目描述 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0). n<=39 class Solution: ...