Div not taking space-CodePudding

I want my div .valorCard-content to take up space and stop sitting on top of the second section. I want it to continue with a portion on top of the image as an overlay, but I don't want it to cover the second section. How do I take up space and the second section is positioned at the bottom, not being covered by the div .valorCard-content?

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

.valorCard {
  padding: 0 24px;
  position: absolute;
  top: 370px;
}

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

<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：

It's generally best to avoid absolute dimensional values in CSS. Instead, use percentages or other relative values. Here you could also do something like calc(100% 10px) to give a specific top margin.

A better solution might be to nest the elements according to their visual location. If you want an element to overlay another, it should really be that element's child. Of course, you may want a document structure as you have it now for proper text flow.

Protip: Use border rather than rules for visual lines. It keeps your markup cleaner and gives more flexibility. If you're using Bootstrap, use the classes provided.

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

.valorCard {
  padding: 0 24px;
  position: absolute;
  top: 100%;
  /* <--------------------------- HERE */
}

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

.border-bottom {
  border-bottom: 1px solid #ddd;
}

<section >
  <div  id="valorContent">
    <div >
      <img  src="https://via.placeholder.com/414x421">
    </div>

    <div >
      <div >
        <h2 >
          Lorem Ipsum
        </h2>

        <div >
          <div >
            <h4 >Test</h4>
          </div>

          <div >
            <h4 >Test</h4>
          </div>

          <div >
            <h4 >Test</h4>
          </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：

Update as the original answer did not address the issue anymore after OP redacted the question.

To solve the issue now:

reenable .valorCard { position: absolute; top: 370px } (if you disabled it).
add #valorCard-content { margin-bottom: 250px } to move the .second section down from under #valorCard-content (or any value that fits your needs).

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

  margin-bottom: 250px;
}

.valorCard {
  padding: 0 24px;
  
  position: absolute;
  top: 370px;
}

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

<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>