项目反思-CSS布局问题|青训营笔记

83 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的第22天

问题发现

这几天在进行掘金官网项目编写的时候,遇到了这样一个问题,我设置了一个头部组件把它的position设定为fixed,然后我就开始进行无限滚动列表的书写,进行盒子布局时,我利用子绝父相的布局规则,对列表包含作者信息的子元素进行绝对定位,定位到了盒子的底部,在往上滚动时,我发现头部组件不能遮盖这一小部分的,百思不得其解,啥原因呢??

9WEOo4a13x.jpg

问题解决

经过查阅资料后,我才明白position为relative的盒子会把fixed的盒子覆盖,想要解决这个问题,可以设置他们的z-index值,只要保证fixed的z-index值比relative的值小就可以了!!!