How to overlay one div on another div with flexbox?

Question

I've made two divs but can't position the first one on top of the second one to get the effect that I want, don't even know if this is possible to achieve using flexbox as I'm doing. I've also tried using z-index on the elements that I want to be overlayed but it didn't work. Any idea on how to do it?

This is how it looks like:

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

why don't you use z-index? if you want to put that picture or flex box behind as it is a background you can out it as

.wrap-container {
    z-index: 1;
}

that way it will be overlay the other div

Answer 2

The solution is by position: relative combine with flexbox.

Veryyyyyy simple trick - Use flexbox (two cols layout) ==> change image position: relative and top: -70px for example (Not absolute).

Done :)

snippet

It looks exactly like your example.

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://picsum.photos/200/100"/>
        </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>

the structure:

The outline: Parent (Section with top/bottom padding) - Inside put container (set max-width) - inside put flexbox with two cols. For the left col set image position to relative and negative value. Works like magic + responsive + very easy to handle. (Could be implemented on bootstrap or any other CSS framework easily).

position: absolute - why not

You could solve this also by absolute position (And set cols position to relative) - but its less responsive + harder to align objects + The height collapse for content below the image ("nightmare").

Answer 3

In this case you need to use position: absolute; or fixed with the proper z-index. You can't do it with flexbox.