前端开发 | 在设计网页时如果一个版块被另一个版块遮挡覆盖应该如何解决？

在大创项目的前端开发中，我遇到了一个问题，就是我导航页面的展开内容会被我主页面的轮播图遮挡住。

这样我设计的导航页面的展开内容就没有用处。

如下图所示：

此时我的鼠标放在导航页，而按照设计我的鼠标置于导航页时，导航页的内容会自动向下展开，那么我是如何解决这个问题的呢？

首先我们导航的内容是nav类的元素，轮播图的内容是banner类的元素。

这时候只需要修改.css文件中.nav和.banner的类选择器就可以。

相关知识点：

position: relative;是CSS中的一个定位属性，用于指定元素的定位方式为相对定位。

当将元素的位置属性设置为relative时，元素会相对于其正常位置进行定位，但不会对其他元素的布局产生影响。也就是说，元素在正常文档流中的位置不会改变，但可以通过指定偏移量来调整元素在页面中的具体位置。

与position: relative相关知识点：

相对定位（Relative Positioning）：相对定位是一种相对于元素正常位置进行微调的定位方式。通过设置position: relative;，可以使用top、right、bottom、left等属性来指定元素相对于其正常位置的偏移量。

偏移量属性（Offset Properties）：在相对定位中，可以使用以下偏移量属性来调整元素的位置：

top：相对于元素正常位置的顶部边缘的偏移量。

right：相对于元素正常位置的右侧边缘的偏移量。

bottom：相对于元素正常位置的底部边缘的偏移量。

left：相对于元素正常位置的左侧边缘的偏移量。

正常文档流（Normal Document Flow）：正常文档流是指元素在没有显式定位的情况下按照其在HTML文档中出现的顺序自动布局的方式。相对定位不会从正常文档流中移除元素，而是在该流中进行微调。

z-index: 1;是CSS中的一个属性，用于指定元素的层级或堆叠顺序。

当给一个元素设置z-index属性时，它会影响元素在垂直堆叠顺序中的位置。具有较高z-index值的元素将显示在具有较低z-index值的元素的上方。

与z-index相关知识点：

堆叠顺序（Stacking Order）：在HTML文档中，元素可以相互重叠。堆叠顺序决定了元素的显示顺序，即哪个元素显示在其他元素的上方。元素的堆叠顺序由z-index属性决定。

层叠上下文（Stacking Context）：每个具有定位属性（如position: relative;、position: absolute;、position: fixed;）以及z-index属性的元素都会创建一个层叠上下文。层叠上下文中的元素会按照一定规则进行层叠，这可以通过z-index属性来控制。

z-index值的比较：z-index属性的值可以是整数、负数或auto。较高的z-index值表示元素在堆叠顺序中更靠近顶部，即显示在其他元素的上方。如果两个具有相同父元素的元素都具有z-index属性，那么它们的层叠顺序将由它们在文档流中的顺序决定。

我们在.nav中添加：

position: relative;

    z-index: 2; /*设置导航的层级为较高的值 */

在.banner中添加：

position: relative;

    z-index: 1; /* 设置轮播图的层级为较低的值 */

这样一来我们的问题就成功解决了，如下图：