CSS - как наложить два элемента <div>друг на друга, размер которых изменяется вместе?

Question

Я пытаюсь наложить два компонента <div> друг на друга, которые также могут автоматически изменять размер в соответствии с размером окна - это означает, что один из двух <div> всегда будет поверх другого.

Мне было интересно, возможно ли иметь два разных компонента div, которые имеют position: relative и автоматически изменяют размер? Я считаю, что это возможно сделать с одним задействованным position: absolute ( как разместить два div над каждым над ).

Answer 1

Чтобы разместить один div поверх другого, вам нужно использовать position: absolute. Однако затем вы можете поместить их оба в содержащий div с position: relative. Для размера относительно размера окна используйте vh и vw.

.container {
  background-color: green;
  position: relative;
  left: 10vw;
  top: 25vh;
  height: 50vh;
  width: 80vw;
}

.box-one {
  background-color: red;
  height: 80%;
  width: 80%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
}

.box-two {
  background-color: blue;
  height: 80%;
  width: 80%;
  position: absolute;
  left: 0px;
  top: 0px;
}

<div class="container">
  <div class="box-one"></div>
  <div class="box-two"></div>
</div>

vw и vh - единицы длины, представляющие 1% от размера области просмотра для ширины (vw) и высоты (vh) соответственно.

z-index определяет порядок стека элемента. Элемент с большим порядком стека всегда находится перед элементом с меньшим порядком стека.

box-one (красный) будет складываться поверх box-two (синий). box-one и box-two займут 80% контейнера.

Position: absolute; Элемент позиционируется относительно своего первого позиционированного (не stati c) элемента-предка.

о, и если вы используете реакцию, измените класс на className