Блок накладывается на секцию

Question

Секция накладывается под блок, в котором все элементы с абсолютным позиционированием.

.category__info {
  text-align: center;
}

.category-title {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
}

.category-subtitle {
  font-size: 15px;
}

.dress__gallery {
  position: relative;
  margin-top: 147px;
}

.dress__gallery-item {
  position: absolute;
}

.dress__gallery-item-1 {
  z-index: 3;
}

.dress__gallery-item-2 {
  top: -5rem;
  right: 2rem;
  z-index: 1;
}

.dress__gallery-item-3 {
  right: -1rem;
  top: 20rem;
  z-index: 2;
}

.dress__link {
  position: absolute;
  top: 34rem;
  right: 15rem;
}

.dress__link a {
  font-size: 15px;
  text-transform: uppercase;
  text-decoration: underline;
}

.new-collection {
  background: url(../images/new-collection-bg.jpg) no-repeat center center;
  background-size: cover;
  height: 100vh;
}

<section class="dress">
  <div class="container">
    <div class="category__info dress__info">
      <div class="category-title dress__info-title">
        <h3>Платья</h3>
      </div>
      <div class="category-subtitle dress__info-subtitle">
        Выбери свой цвет
      </div>
    </div>
    <div class="dress__gallery">
      <div class="dress__gallery-item dress__gallery-item-1 ">
        <img src="images/dress1.jpg" alt="">
      </div>
      <div class="dress__gallery-item dress__gallery-item-2">
        <img src="images/dress2.jpg" alt="">
      </div>
      <div class="dress__gallery-item dress__gallery-item-3">
        <img src="images/dress3.jpg" alt="">
      </div>
      <div class="dress__link">
        <a href="#">показать женские платья</a>
      </div>
    </div>
  </div>
</section>
<section class="new-collection">
</section>

В инспекторе кода у галереи высота 0. Предполагаю, что это из-за абсолютного позиционирования, но не понимаю как решить проблему.

Answer 1

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
}

body {
  font-family: sans-serif;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  display: block;
  padding: 0 10px;
  width: 100%;
}

.btn {
  text-decoration: none;
  color: white;
  text-transform: uppercase;
  background-color: black;
  padding: 15px;
  border: 2px solid transparent;
  transition-property: border-color, background-color, color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

.btn:hover {
  background-color: white;
  border-color: black;
  color: black;
}

section {
  padding: 20px 0;
}

.category__info {
  text-align: center;
}

.category__info>*+* {
  margin-top: 15px;
}

.category-title {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 700;
}

.category-subtitle {
  font-size: 15px;
}

.dress__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 20px;
}

.dress__gallery-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.new-collection {
  background: url(https://picsum.photos/2000/1000) no-repeat center center;
  background-size: cover;
  height: 100vh;
}

@media (max-width: 400px) {
  .dress__gallery {
    grid-template-columns: 1fr;
  }
}

<section class="dress">
  <div class="container">
  
    <div class="category__info dress__info">
      <div class="category-title dress__info-title">
        <h3>Платья</h3>
      </div>
      <div class="category-subtitle dress__info-subtitle">
        Выбери свой цвет
      </div>

      <div class="dress__gallery">
        <div class="dress__gallery-item dress__gallery-item-1 ">
          <img src="https://picsum.photos/id/100/2000/1000" alt="">
        </div>
        <div class="dress__gallery-item dress__gallery-item-2">
          <img src="https://picsum.photos/id/101/2000/1000" alt="">
        </div>
        <div class="dress__gallery-item dress__gallery-item-3">
          <img src="https://picsum.photos/id/102/2000/1000" alt="">
        </div>
        <div class="dress__gallery-item">
          <a class="btn" href="#">показать женские платья</a>
        </div>
      </div> <!-- .dress__gallery -->
      
    </div> <!-- .category__info.dress__info -->
    
  </div> <!-- .container -->
</section>

<section class="new-collection">

</section>

БЛОГ НА HUSL

Блок накладывается на секцию

Ответы (1 шт):