CSS中使用position: fixed固定定位时遮挡下方内容

问题描述

在使用position: fixed时，会出现遮挡文字内容

此时底部tabbar遮挡了部分内容

原因分析：

本质是因为被遮挡部分的z-index的层级不够高，可以调整z-index或者padding-bottom来修改

z-index 较大的重叠元素会覆盖较小的元素，z-index属性的值：auto(默认值)与父元素的层级相等，如各级祖先元素均未设置该属性，则为0，因此增加被遮挡内容的z-index值或者直接调整父盒子padding-bottom

解决方案：

1.设置z-index值（不推荐）2.给父盒子设置一个padding-bottom,高度为遮挡物的高度（推荐）

z-index属性只能在设置了position: relative | absolute | fixed的元素和父元素设置了 display: flex属性的子元素中起作用，在其他元素中是不作用的。

1. 方案一：修改z-index

.favor{
    position: relative;
    z-index: 9;
}

调整z-index层级后，此时内容没有被遮挡

2. 方案二：调整父盒子的padding-bottom（推荐）

.favor{
    padding-bottom: 50px;
}

设置padding-bottom为遮挡物高度时，此时内容没有被遮挡

如果本文对你有帮助的话，麻烦点个赞再走吧