小技巧处理 fixed 定位后其它内容被覆盖的问题

Last Updated: November 4, 2018 · 3 min read

我们知道当对一个元素设置了 position: fixed; 后,该元素会脱离文档流,下面的内容会顶上来,导致被内容被遮盖。常见的一个做法是设置下面内容的 paddingmargin,虽然能达到效果,但是总归不完美,特别是当我们想封装一个组件给别人用的时候,还得让别人设置一下样式,这样岂不麻烦,所以就有了下面这个方法,以我封装的这个 vue header 组件为例

示例代码

template

html

script

javascript

style(scss)

scss

总结

外面套一个父元素,height 假设为 50px,然后我们对里面这个元素设置 position: fixed;,它的 height 也设置 50px,这样的话虽然里面脱离了文档流,但是父元素依然占据着空间,所以下面的元素也就不会顶上来,当别人使用你的组件时再也不用费力设置 paddingmargin 了。

一些效果截图

图中头部是上面示例代码的效果图,tabbar 是我封装的另一个组件,这里为了演示效果,我把他们放到一起

5mWmzX.png


©2022xiaojun1994
 0   0