Position div on top of another-CodePudding

I'm trying to position my div .valorCard on top of my image. I want the div to have a piece of it on top of the end of the image, I'm using relative position on the image and absolute position on the div and a value on the bottom for that. But the div is covering my second section and I don't want that to happen. Can someone help me? I can't use absolute position in my second section because it ruins the style of it.

#valorContent {
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.valorCard {
  padding: 0 24px;
  position: absolute;
  bottom: -190px;
  width: 150px;
}

.valorCard-content {
  border: 2px solid green;
  background-color: grey;
}

<section >
  <div  id="valorContent">
    <div >
      <img  src="https://source.unsplash.com/user/c_v_r/414x421">
    </div>
    <div >
      <div >
        <h2 >
          Lorem Ipsum
        </h2>
        <hr>
        <div >
          <div >
            <h4 >Test</h4>
          </div>
          <hr>
          <div >
            <h4 >Test</h4>
          </div>
          <hr>
          <div >
            <h4 >Test</h4>
          </div>
          <hr>
        </div>
      </div>
    </div>
  </div>
  </div>
</section>
<section >
  <div>
    <div>
      <div>
        <div>
          <p >
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>
      <div >
        <div >
          <p >
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

CodePudding user response：

As I unserstand your explanation I thing this is the behavior that you desire.

Most in common. You already have used the flexbox with a column whih is nice. If you would like to rearragne the elements inside the flex container there is no need to use the position: absolute. You have to just use the order: NUMBER property to order the elements inside the flex.

#valorContent {
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.valorCard {
  padding: 0 24px;
  bottom: -190px;
  width: 60%;
  order: 0;
}

.valorImagem {
    order: 1;
}

.valorCard-content {
  border: 2px solid green;
  background-color: grey;
}

<section >
  <div  id="valorContent">
    <div >
      <img  src="https://source.unsplash.com/user/c_v_r/414x421">
    </div>
    <div >
      <div >
        <h2 >
          Lorem Ipsum
        </h2>
        <hr>
        <div >
          <div >
            <h4 >Test</h4>
          </div>
          <hr>
          <div >
            <h4 >Test</h4>
          </div>
          <hr>
          <div >
            <h4 >Test</h4>
          </div>
          <hr>
        </div>
      </div>
    </div>
  </div>
  </div>
</section>
<section >
  <div>
    <div>
      <div>
        <div>
          <p >
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>
      <div >
        <div >
          <p >
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

CodePudding user response：

If I understand your intentions correctly, you can add overflow: hidden; to the css for #valorContent to hide the overflowing part:

#valorContent {
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.valorCard {
  padding: 0 24px;
  position: absolute;
  bottom: -190px;
  width: 150px;
}

.valorCard-content {
  border: 2px solid green;
  background-color: grey;
}

<section >
  <div  id="valorContent">
    <div >
      <img  src="https://source.unsplash.com/user/c_v_r/414x421">
    </div>
    <div >
      <div >
        <h2 >
          Lorem Ipsum
        </h2>
        <hr>
        <div >
          <div >
            <h4 >Test</h4>
          </div>
          <hr>
          <div >
            <h4 >Test</h4>
          </div>
          <hr>
          <div >
            <h4 >Test</h4>
          </div>
          <hr>
        </div>
      </div>
    </div>
  </div>
  </div>
</section>
<section >
  <div>
    <div>
      <div>
        <div>
          <p >
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>
      <div >
        <div >
          <p >
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>