CODEWITHSUNDEEP
htmlcsssasscss-position
Matteo Boscolo
Matteo Boscolo

Reputation: 708

Position relative elements in the flow of the page after an absolute element has been placed

I'm sure it is something everyone has stepped into. I got a solution but I'm looking for the best way and more solid approach to do this.

Basically what I'm trying to do is position all my relative elements in the flow of the page after an absolute element has been placed.

enter image description here

As soon as I position:absolute the red div, the remaining position:relative elements will flow above the absolute positioned content. The solution I found is to create an offset class like this:

.offset {
  position: relative;
  top: 830px;
}

and apply it to every (damn) element following the red div. However, I hope there is a better way to do this (I'm concerned about responsivess and overall I think is a messy solution). 

.absolute {
position: absolute;
top:800px;
}

.relative {
position: relative;
}

.box {
width: 1920px;
height: 1080px;
}

.red {
background-color: red;
}

.blue {
background-color: blue;
opacity: 0.5;
}

.yellow {
background-color: yellow;
opacity: 0.5;
}
<div class="wrapper relative">
  <div class="relative box red">Go over me thanks</div>
  <div class="absolute box yellow">Absolute positioned element</div>
</div>
<div class="relative box blue">Relative positioned element</div>

Upvotes: 1

Views: 1035

Answers (1)

Johannes
Johannes

Reputation: 67778

Don't use top, but margin-top instead.

top: 800px on a relatively positioned elements will move that one down by 800px in relation to its original position, but the following element won't have that offset and they will overlap.

With margin-top the relatively positioned element will really extend down to its visible lower border.

Upvotes: 4

Related Questions