Как наложить один div на другой div с помощью flexbox?

Question

Я сделал два деления, но не могу расположить первый над вторым, чтобы получить желаемый эффект, даже не знаю, возможно ли это сделать с помощью flexbox, как я делаю. Я также использовал index-z для элементов, которые я хочу наложить, но это не сработало. Есть идеи, как это сделать?

Вот как это выглядит:

HTML

<div class="wrap-container">
<div class="row section-2-about">
            <div>
              <img
                src="bookpicture.png"
                class="bookpicture"
                max-width="800"
                height="550"
              />
            </div>
            <div class="about-me">
              <div><h1 class="about-me-title">About me</h1></div>
              <div class="about-me-text">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
                commodo ligula eget dolor. Aenean massa. Cum sociis natoque
                penatibus et magnis dis parturient montes, nascetur ridiculus
                mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
                quis, sem.
                <p>
                  Nulla consequat massa quis enim. Donec pede justo, fringilla
                  vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus
                  ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis
                  eu pede mollis pretium. Integer tincidunt. Cras dapibus.
                </p>
                Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
                Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
                enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,
                tellus.
              </div>
            </div>
          </div>
          <div class="row section-3-about">
            <div class="row"></div>
          </div>
        </div> 
</div>

CSS

.wrap-container {
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.section-2-about {
  height: 100px;
  justify-content: center;
}

.bookpicture {
  padding-right: 100px;
}
.section-3-about {
  height: 700px;
  background-color: rgba(234, 203, 193, 0.3);
}

.about-me-title {
  font-family: "Ibarra Real Nova", serif;
  align-items: center;
  color: rgba(40, 44, 48, 1);
  font-weight: bold;
  text-align: left;
  font-size: 40px;
  padding: 300px 0 0 50px;
}

.about-me-text {
  width: 400px;
  padding-left: 50px;
  font-family: "Lato", sans-serif;
  line-height: 1.8;
  letter-spacing: 0;
  font-weight: 300;
  font-size: 13px;
}

Answer 1

Решение этой проблемы - position: relative в сочетании с flexbox.

Очень простой трюк - используйте flexbox (расположение двух столбцов) ==> изменить изображение position: relative и top: -70px, например (не absolute).

Готово:)

фрагмент

Это выглядит точно так же, как ваш пример.

body{
  margin: 0px;
}
.section{
  padding: 20px 20px;
  background: #f8efed;
}

.container{
  max-width: 1180px;
  margin: auto 5px;
}

.flex{
  display: flex;  
}

.col{
  flex-basis: 50%;
}

.image{
  text-align: center;
  padding: 10px;
}

/* "The trick */
.image img{
  position: relative;
  top: -70px;
  opacity: 0.7;
}

<div style="height: 100px;"></div>
<main class="section">
  <section class="container">
    <div class="flex">
      <div class="col">
        <div class="image">
          <img src="https://i.picsum.photos/id/821/203/300.jpg"/>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <h2>Hello world</h2>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        </div>
      </div>
    </div>
  </section>
</main>

Структура:

Контур: Родитель (раздел с верхним / нижним заполнением) - Внутри положить контейнер ( установить max-width) - внутри поставить flexbox с двумя столбцами. Для левого столбца установите положение изображения на relative и отрицательное значение. Работает как волшебный c + отзывчивый + очень простой в обращении. (Может быть легко реализован на bootstrap или любом другом CSS фреймворке).

позиция: абсолютная - почему бы и нет

Вы можете решить эту проблему также с помощью absolute позиции (и установить позицию cols относительно) - но это на менее отзывчиво + сложнее для выравнивания объектов + Высота коллапса для контента под изображением («кошмар»).

Answer 2

В этом случае вам нужно использовать position: absolute; или fixed с правильным z-индексом. Вы не можете сделать это с flexbox.