停止继承 child/parent 个元素

Question

我希望文本显示在 img .containerLogoMobi 下方。但也想让导航栏覆盖 img。我不确定如何使用 parent/child 元素或 relative/absolute 执行此操作。我将 img 设置为 z-index -1 和 absolute，所以它出现在导航下方。我现在希望文本继续跟随堆栈，因为它在我的 html.

中

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

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

.logoDesktop{
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 0px;
    z-index: -1;
}

.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{
    background-color: rgba(47, 69, 111, .7) !important;
}

<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Menu</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
          <a class="nav-link" href="#">Services</a>
          <a class="nav-link" href="#">Gallery</a>
          <a class="nav-link" href="#">Contact</a>
        </div>
      </div>
    </div>
</nav>
<div class="containerLogoDesk"><!-- D E S K T O P   L O G O -->
    <img src="images/test.gif" class="logoDesktop">
</div>
<div class="containerLogoMobi"><!-- M O B I L E   L O G O -->
    <img src="images/logoMobileEn.gif" class="logoMobile">
</div>
<p>Hello there!</p>

Answer 1

您所要做的就是使 wrapper class 超过您的 image，这将包含您的 image 和“Hello there”。现在，您可以根据需要定位包装器 div（就像定位 image/logo 一样），而不是图像本身。然后你可以相对于 wrapper div 定位你的“hello there”（在 aim class 内）。我删除了不必要的CSS（媒体查询和CSS for mobile devices），但你应该能看懂。

Also the thing to know here is that when you position hello there absolutely, it will happen relative to its absolutely or relatively positioned parent.

.wrapper{   
    width: 100%;
    height: auto;
    position: absolute;
    top: 0px;
    z-index: -1;
}
.logoDesktop{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
}

.aim{
  position : absolute;
  bottom: -50px;
  left:50%;
  transform: translate(-50%, -50%);
}


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

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

.navbar{
    background-color: rgba(47, 69, 111, .7) !important;
}

<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Menu</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
          <a class="nav-link" href="#">Services</a>
          <a class="nav-link" href="#">Gallery</a>
          <a class="nav-link" href="#">Contact</a>
        </div>
      </div>
    </div>
</nav>
<div class="containerLogoDesk"><!-- D E S K T O P   L O G O -->
  <div class="wrapper">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPdMdOz5mtOSoSF7KYxcriebbpIdnLr8XbP4OoHKtqOPJymMN0n94hpSs7ugViusGVIA&usqp=CAU" class="logoDesktop">
    <p class="aim">Hello there!</p>
   </div>
</div>

现在我们应该知道您可以通过其他方式做到这一点：

您应该定位您的导航栏，而不是定位您的徽标。特别是当您要使其与图像重叠时。处理起来会容易得多，因为它不会造成任何问题，因为无论如何它都会超出页面流。您不必只处理 hello there。你也必须处理你所有的后期元素。
在 CSS 的帮助下使用图像作为背景。这样您就可以有效地定义所有主要元素，而不必担心定位问题。

结论：以上两个解决方案在我看来比你想要实现的要好，你应该尽可能避免使用定位。

停止继承 child/parent 个元素

stop inheritance child/parent elements

html

css

overlay

parent-child

nav