stop inheritance child/parent elements

I want the text <Hello there!> to appear below the img .containerLogoMobi. but want to keep the navbar overlaying the img aswell. I am not sure how to do this with parent/child elements or relative/absolute. I have the img set to z-index -1 and absolute so it appears under the nav. I now want the text to continue to follow the stack as it is in my 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>

Solution

All you have to do is to make wrapper class over your image, which would hold both your image and "Hello there". Now you can position your wrapper div according to your needs, (just like you positioned you image/logo), instead of image itself. And then you can position your "hello there"(inside aim class) relative to that wrapper div. I removed the unnecessary CSS (media queries and CSS for mobile devices), but you should be able to understand.

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>

Now we should know about other ways you could have done it:

Instead positioning your logo, you should have positioned your navbar. Especially when your going to make it overlap the image. It would have been much easier situation to deal with because it won't cause any problems because its would have been out of page flow anyway. You don't have to just deal with hello there. You have to deal with all your later element too.
Used the image as background with help of CSS. that way you could have defined all major elements effectively and not have to worry about, positioning at all.

Conclusion: These above two solution look better to me than what you are trying to achieve, you should avoid using positioning as much as possible.