博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

关于CSS的粘性定位sticky失效问题

Posted on 2021-11-09 11:11  yqphare  阅读(836)  评论(0编辑  收藏  举报

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

亲测 有效!