[Solved] Problem with div that has position relative

by


OK. So, I know this is a hard thing to explain… but I’m guessing that you’re positioning the div for activity – something like position: relative – and then also top: 672px

relative positioning works by changing the position – ‘relative’ to its natural place in the flow. It also has the added effect of creating a positioning boundary for children that are positioned absolutely. But it’s not going to add page height or be tracked by scroll etc. It’s still where it started… you’ve just visually moved how the box is being displayed. What are you using it for? You can likely accomplish what you want – without relative positioning.

To get closer to being able to answer you, here is an example of how I would write the layout you showed. (simplified)

If you take a look at this jsFiddle (https://jsfiddle.net/sheriffderek/ny5hfa67) – maybe you can amend it to show your issue.

Here’s a resource to get the most out of your questions: https://stackoverflow.com/help/how-to-ask

.overview {
  border: 1px solid red;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.overview .area {
  border: 1px solid blue;
  flex-basis: 50%;
  padding: 1rem;
}

.activity {
  position: relative; /* so what? */
  border: 1px solid green;
}

.activity .activity-list {
  border: 1px solid orange;
}

.activity-list .link {
  display: block;
  padding: 1rem;
}
<section class="overview">

  <aside class="area attendance">
    attendance
  </aside>
  
  <aside class="area payments">
    payments
  </aside>

</section>


<section class="activity">
  
   <aside class="activity-list">
     <ul class="item-list">
       <li class="item">
         <a class="link">item</a>
       </li>
       <li class="item">
         <a class="link">item</a>
       </li>
     </ul>
   </aside>
  
</section>

solved Problem with div that has position relative