CSS relative positioning and flow

Question

I have the following layout. I've set my CSS so that the p element overlaps the first div.

#wrapper {
  width: 600px;
  margin: 0 auto;
}
.div-01 {
  background: red;
  height: 400px;
}
.div-02 {
  background: green;
  height: 200px;
}
p {
  background: blue;
  color: #fff;
  margin: 0 100px;
  padding: 100px;
  position: relative;
  bottom: 100px;
}

<div id="wrapper">
  <div class="div-01"></div>
  <p>Hello world</p>
  <div class="div-02"></div>
</div>

But I also want it so that there is no gap before the green div, notice here that the green div is acting like the position of the p hasn't been modified.

I understand that this is normal behaviour, but is there any way to get the green div to appear straight after the p?

EDIT:

Sorry, I should have mentioned that I'd like it so that all elements after the p act as though the p hasn't been moved with relative positioning exactly, but as though it's natural position is as though it was overlapping the blue div

So basically no gaps in between any elements that follow the p

I also can't use absolute positioning, because it's unclear how tall any of the elements will be in the real thing

Answer 1

I understand that this is normal behaviour, but is there any way to get the green div to appear straight after the p?

Yes, apply the relative positioning to both elements. In other words, give the green div the same bottom: 100px as the p above it.

#wrapper {
  width: 600px;
  margin: 0 auto;
}

.div-01 {
  background: red;
  height: 400px;
}

.div-02 {
  background: green;
  height: 200px;
  position: relative;
  bottom: 100px;
}

p {
  background: blue;
  color: #fff;
  margin: 0 100px;
  padding: 100px;
  position: relative;
  bottom: 100px;
}

<div id="wrapper">
  <div class="div-01"></div>
  <p>Hello world</p>
  <div class="div-02"></div>
</div>

Of course, this means that elements below div-02 will see this element in its original position.

For an understanding of how relative positioning works see my answer here: Why are horizontal scroll bars shown on my website?

---

UPDATE (based on comments)

... I meant so that there are no gaps in any of the elements that follow...

In that case, remove all relative positioning and just use margin-top: -100px on the p.

#wrapper {
  width: 600px;
  margin: 0 auto;
}

.div-01 {
  background: red;
  height: 400px;
}

.div-02 {
  background: green;
  height: 200px;
}

p {
  background: blue;
  color: #fff;
  margin: -100px 100px 0;
  padding: 100px;
}

<div id="wrapper">
  <div class="div-01"></div>
  <p>Hello world</p>
  <div class="div-02"></div>
</div>

Answer 2

You can use same amount of negative margin-top on green div as bottom position of blue div.

#wrapper {
  width: 600px;
  margin: 0 auto;
}
.div-01 {
  background: red;
  height: 400px;
}
.div-02 {
  background: green;
  height: 200px;
  margin-top: -100px;
}
p {
  background: blue;
  color: #fff;
  margin: 0 100px;
  padding: 100px;
  position: relative;
  bottom: 100px;
}

<div id="wrapper">
  <div class="div-01"></div>
  <p>Hello world</p>
  <div class="div-02"></div>
</div>