如何停止父/子元素继承，让文字在.containerLogoMobi图片下且保留navbar覆盖效果

云原生阿岚

2026-10-4

问题核心原因

你当前的问题根源是桌面端logo.logoDesktop设置了absolute定位后完全脱离了正常文档流，它的父元素.containerLogoDesk没有设置高度，无法在文档流中占住对应位置，导致后续的<p>标签直接顶到导航栏下方，被logo遮挡。同时原来的logo设置z-index:-1会导致logo可能落到body背景层下方，导航栏没有显式设置层级也可能出现覆盖异常。

修改后的完整CSS代码

@media screen and (min-width: 730px) {
    .containerLogoMobi, .navbar-brand  {
        display: none;
    }
}

@media screen and (max-width: 730px) {
    .containerLogoDesk{
        display: none;
    }
}

/* 新增桌面端logo父容器样式，切断子元素对body的定位继承 */
.containerLogoDesk {
    position: relative;
    width: 100%;
    /* 这里替换为你的桌面端logo实际高度，如果是响应式图片可以用对应宽高比的padding-top撑开，比如16:9的图就写 padding-top: 56.25%; 删掉height设置即可 */
    height: 300px; 
}

.logoDesktop{
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* 移除原有的z-index:-1，避免logo落到页面最底层 */
}

.logoMobile{
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
}

.navbar-nav{
    margin-right: auto;
    margin-left: auto;
}

.nav-link, .navbar-brand{
    font-family: Alegreya Sans SC;
    font-size: 20px;
}

.navbar{
    /* 新增定位和层级，保证导航栏始终覆盖在logo上方 */
    position: relative;
    z-index: 10;
    background-color: rgba(47, 69, 111, .7) !important;
}