Блог

Главная - Вопросы по программированию - остановить наследование дочерних/родительских элементов

остановить наследование дочерних/родительских элементов

#html #css #parent-child #overlay #nav

Вопрос:

Я хочу, чтобы текст <Привет!> появился под img .containerLogoMobi. но я хочу, чтобы навигационная панель также перекрывала изображение. Я не уверен, как это сделать с родительскими/дочерними элементами или относительными/абсолютными. У меня есть img, установленный на z-индекс -1 и абсолютный, поэтому он отображается под навигацией. Теперь я хочу, чтобы текст продолжал следовать за стеком, как в моем 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>

Ответ №1:

Все , что вам нужно сделать, это создать wrapper класс над вашим image , который будет содержать как ваше image , так и « Hello there «. Теперь вы можете расположить свой div-обертку в соответствии с вашими потребностями (точно так же, как вы расположили свое изображение/логотип), а не само изображение. И затем вы можете расположить свой « hello there «(внутри aim класса) относительно этого wrapper div. Я удалил ненужный CSS (медиа-запросы и CSS для мобильных устройств), но вы должны быть в состоянии понять.

Также здесь важно знать, что, когда вы hello there занимаете абсолютную позицию, это произойдет относительно его абсолютно или относительно расположенного родителя.

 .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:ANd9GcTPdMdOz5mtOSoSF7KYxcriebbpIdnLr8XbP4OoHKtqOPJymMN0n94hpSs7ugViusGVIAamp;usqp=CAU" class="logoDesktop">
    <p class="aim">Hello there!</p>
   </div>
</div>

Теперь мы должны знать о других способах, которыми вы могли бы это сделать:

  1. Вместо того, чтобы размещать свой логотип, вы должны были разместить свою навигационную панель. Особенно когда вы собираетесь наложить его на изображение. С этой ситуацией было бы намного проще справиться, потому что это не вызовет никаких проблем, потому что в любом случае она была бы вне потока страниц. Вам не нужно просто иметь дело с hello there этим . Вам также придется иметь дело со всеми вашими последующими элементами.
  2. Использовал изображение в качестве фона с помощью CSS. таким образом, вы могли бы эффективно определить все основные элементы и вообще не беспокоиться о позиционировании.

Вывод: Эти два вышеперечисленных решения кажутся мне лучше, чем то, чего вы пытаетесь достичь, вам следует как можно больше избегать использования позиционирования.

Комментарии:

1. Хорошо, спасибо за вашу помощь, я согласен и выбрал второй подход, чтобы исправить навигационную панель вверху, а не img, чтобы избежать влияния на остальную часть стека. Не знал, что у Bootstrap есть класс, чтобы исправить навигационную панель именно так, как я хотел!

Метки: