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


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

亲测 有效!


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM