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
亲测 有效!