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. Golang/Java 实现无重复字符的最长子串 - LeetCode 算法

    给定一个字符串 s ,请你找出其中不含有重复字符的 最长子串 的长度. 来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/longest-subs ...

  2. css3新增文本属性

    css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...

  3. 简单几步零成本使用Vercel部署OneIndex 无需服务器搭建基于OneDrive的网盘

    前提 你需要一个OneDrive账号,必须管理员开放API 需要已安装Node.js 拥有Github账号,没有就注册一个 魔法上网环境(看情况) 注册应用 登录https://portal.azur ...

  4. struts2漏洞复现分析合集

    struts2漏洞复现合集 环境准备 tomcat安装 漏洞代码取自vulhub,使用idea进行远程调试 struts2远程调试 catalina.bat jpda start 开启debug模式, ...

  5. jmeter基础功能及认识

    1.基础知识: JMeter是免费开源的,纯java开发的性能测试工具,可以测试静态和动态的资源,例如:静态文件.java服务小程序.CGI脚本.java对象.数据库.FTP服务器.邮件服务器和Per ...

  6. 验证域用户（C#）

    代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Runtime.Intero ...

  7. Java：NIO 学习笔记-1

    Java:NIO 学习笔记-1 说明:本笔记是根据bilibili上 尚硅谷 的课程 NIO视频 而做的笔记 主要内容 Java NIO 简介 Java NIO 与 IO 的主要区别 缓冲区(Buff ...

  8. Noip模拟44 2021.8.19

    比较惊人的排行榜 更不用说爆零的人数了,为什么联赛会这么难!!害怕了 还要再努力鸭 T1 Emotional Flutter 考场上没切掉的神仙题 考率如何贪心,我们把黑色的条延长$s$,白色的缩短$ ...

  9. sed初理多行合并+sed之G、H、g、h使用+sed n/N使用说明

    转载:[shell]sed处理多行合并 - seyjs - 博客园 (cnblogs.com) 文件格式 table=t1 name owner address table=t2 id text co ...

  10. dubbo 配置 loadbalance 不生效？撸一把源码

    背景 很久之前我给业务方写了一个 dubbo loadbalance 的扩展(为了叙述方便,这个 loadbalance 扩展就叫它 XLB 吧),这两天业务方反馈说 XLB 不生效了 我心想,不可能 ...