Блог

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

Как сделать так, чтобы дочерний элемент находился позади родительского элемента, но не над основным контейнером

#html #css

Вопрос:

Я постараюсь объяснить это как можно проще. Я хотел бы иметь элемент «великий родитель», который занимает высоту 100 вч и 100% ширины окна просмотра, что-то вроде раздела, а внутри будет родительский элемент, содержащий дочерний элемент, который будет иметь абсолютное позиционирование.

 <body>

  <div class="container">
    <div class="parentElement">
      <div class="ChildrenElement">
      
      </div>
    </div>
  </div>

</body>

Моделирование:

 <style>
    .container {
      background-color:black;
      min-height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    
    .parentElement {
      position:relative;
      background-color:blue;
      width: 800px;
      height: 200px;
    }
    
    .ChildrenElement {
      position:absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255,192,203, 0.5);
      transform: translate(10%);
    }
</style>

Вывод:

Выход

Но я бы хотел, чтобы это было что-то вроде:

Ожидаемый

Красное поле представляет дочерний элемент, и если он удаляется от родительского элемента, он должен находиться за черным фоном

Код:

https://jsbin.com/pemasacazi/edit?html

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

1. Вы пробовали использовать z-индекс?

Ответ №1:

Я верю, что вы ищете oveflow:hidden (https://developer.mozilla.org/en-US/docs/Web/CSS/overflow).

     .container {
      background-color:black;
      min-height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    
    .parentElement {
      position:relative;
      background-color:blue;
      width: 800px;
      height: 200px;
      max-width: 90%;
      margin: auto;
      overflow:hidden;
    }
    
    .ChildrenElement {
      position:absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255,192,203, 0.5);
      transform: translate(10%);
    } 
 <!DOCTYPE html>

<body>
  <div class="container">
    <div class="parentElement">
      <div class="ChildrenElement">
      
      </div>
    </div>
  </div>
  
  </body>

Ответ №2:

Проблема здесь в том, что HTML всегда помещает родительские элементы за дочерними элементами, чтобы они были видны. Мы можем изменить это, просто поменяв местами классы родительских и дочерних элементов:

 .container {
  background-color: black;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parentElement {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 192, 203, 0.5);
  transform: translate(10%);
}

.ChildrenElement {
  position: relative;
  background-color: blue;
  width: 800px;
  height: 200px;
} 
 <body>

  <div class="container">
    <div class="ChildrenElement">
      <div class="parentElement">

      </div>
    </div>
  </div>

</body>

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

Метки: , ,