前端使用fixed布局固定导航栏会被正文组件遮挡的问题

问题描述

在前端设计中经常需要使用fixed布局（position：fixed）固定组件（如导航栏置顶固定），但是有时会出现正文组件遮挡了fixed组件的问题，如：

原因分析

出现这种问题的原因是，部分正文组件的堆叠顺序比导航栏高，导致导航栏被遮盖

解决方法

对使用了fixed布局的导航栏，CSS设置z-index属性

z-index 属性指定一个元素的堆叠顺序
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

因此只需设置z-index属性为一个比遮挡组件堆叠顺序更高的值（如99）即可

 	position: fixed;
    top: 0px;
    z-index: 99;

显示正常：

这篇好文章是转载于：学新通技术网