How do I make row of div on top of parent div?

Question

How do I place a row of div (which has 3 columns of image) on top of parent div (image) . I am using Bootstrap 5. Previously I used to do postition: absolute. The problem here is that the row overflow is being hidden. I have tried overflow: visible too. Below down is the code sample and the result i am getting. Thank you for any kind of help.

.accomplishments{
  background: url("https://picsum.photos/1000/600");
  width: 100%;
  height: 40rem;
  background-size: cover;
  margin-top: 12rem;
  position: relative;
}

.project-tray{
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow-y:visible ;  
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<main>
  <div class="container" >
    <h1 class="">Accomplishments</h1>
  </div>
  <div class="container-fluid  accomplishments mb-5 ">
    <div class="container" >
      <div class="row project-tray ">
        <div class="col " >
          <img src="https://picsum.photos/300/301" class="img-fluid " alt="">
        </div>
        <div class="col">
          <img src="https://picsum.photos/300/302" class="img-fluid" alt="">
        </div>
        <div class="col">
          <img src="https://picsum.photos/300/303" class="img-fluid" alt="">
        </div>
      </div>
    </div>
  </div>
</main>

here are attached images of output:

The output i am getting

Expected output (figma)

Can't find the container in your HTML where "Accomplishment" is visible as the heading. Please share it too. — Samir Selia, Jun 26 '21 at 12:58
hello Samir, there is no problem with ```
Accomplishments
``` . The issue here is that overflow row is beinng hidden somehow. I have updated the images. — thebuggybug, Jun 26 '21 at 13:38
I understood that. But in order to provide you a solution, we need an appropriate and complete structure. If you can create a fiddle (https://jsfiddle.net/) that would be best. — Samir Selia, Jun 26 '21 at 13:39
Hello Samir, I have added appropriate structure of code for that section. Thanks for pointing out my mistake. — thebuggybug, Jun 26 '21 at 13:48
https://i.stack.imgur.com/K8wIB.png is this your expected output? — Samir Selia, Jun 26 '21 at 13:53
Yes ! To overlap that row (which has column of 3 image) over background. — thebuggybug, Jun 26 '21 at 13:56
I just added height to the accomplishment container and it's working fine. Check this https://jsfiddle.net/6nxe29fL/2/ — Samir Selia, Jun 26 '21 at 14:05

Ezra Siton · Answer 1 · 2021-06-26T14:23:37.860

In general, it is better practice to "avoid" position absolute for such a simple layout (position absolute Breaks the normal flow + collapse height). By negative margin it is very easy to create this overlap (And keep the normal flow).

Snippet (Same as your desire layout solve only by one line of custom CSS):

.negative-margin{
  margin-top: -150px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<main>
  <div class="container">
    <h1 class="">Accomplishments</h1>
  </div>
  <div class="container-fluid  accomplishments mb-5 ">
    <div class="container" >
      <div class="row project-tray ">
        <div class="col " >
          <img src="https://picsum.photos/201/300" class="img-fluid " alt="">
        </div>
        <div class="col">
          <img src="https://picsum.photos/202/300" class="img-fluid" alt="">
        </div>
        <div class="col">
          <img src="https://picsum.photos/203/300" class="img-fluid" alt="">
        </div>
      </div>
    </div>
  </div>
  <div>
    <img class="img-fluid negative-margin" alt="Responsive image" src="https://picsum.photos/1920/1080">
  </div>
</main>

score 0 · Answer 2 · answered Jun 26 '21 at 14:31

Just a little changes in the bootstrap structure and shifted the class accomplishments from container-fluid class to col-12 class. Also added margin-top: 200px !important; that was missing in your stylesheet.css .accomplishments

.accomplishments {
  background: url(https://picsum.photos/1000/600);
  width: 100%;
  height: 36rem !important;
  margin-top: 200px !important;
  background-size: cover;
  position: relative;
}

.project-tray {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow-y: visible;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<main>
  <div class="container heading">
    <h1 class="text-center pt-5">Accomplishments</h1>
  </div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 accomplishments">
        <div class="row project-tray ">
          <div class="col ">
            <img src="https://picsum.photos/300/301" class="img-fluid " alt="">
          </div>
          <div class="col">
            <img src="https://picsum.photos/300/302" class="img-fluid" alt="">
          </div>
          <div class="col">
            <img src="https://picsum.photos/300/303" class="img-fluid" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

score -1 · Answer 3 · answered Jun 26 '21 at 13:54

-1

I'm new to web-development but I think you should try to delete the top: 0%; property to see if it makes change.

answered Jun 26 '21 at 13:54

Trọng Vương

1
2

How do I make row of div on top of parent div?

Accomplishments

3 Answers3