Two relative divs overlap each other

Question

I have the following code:

body {
  padding: 0;
  margin: 0;
}
.container {
  width: 30%;
  margin: 0 35%;
  background: yellow;
  position: relative;
  height: 900px;
}
.p1_1 {
  position: relative;
  width: 50%;
  height: 70%;
  top: 10%;
  left: 0;
  background-color: green;
}
.p1_2 {
  position: relative;
  width: 100%;
  height: 20%;
  border: 1px solid blue;
  top: 0;
}

<div class="container">
  <div class="p1_1">
    top box
  </div>
  <div class="p1_2">
    hello box
  </div>
</div>

My question is why is the top:10% of .p1_1 affecting the position of .p1_2? I would have thought this was a really simple relative placing of the div following the second - unless I'm missing something blindingly obvious?

Ok - so the following code is nearer what I was expecting but how there is 15% of space not 10% (i.e. set margin-top:15% works fine) so I'm confused how 70 + 10 + 20 can't equal 100??

html,body { 
    padding:0; 
    margin:0;
    height:100%;                    
    position:relative;
}

.container {
    width:30%;
    margin:0 35%;
    background:yellow;
    position:absolute;
    height:100%;
    top:0;
}

.p1_1 {
    position:relative;
    width:50%;
    height:70%;
    margin-top:10%;
    background-color:green;
}

.p1_2 {
    position:relative;
    width:100%;
    height:20%;
    background-color:blue;
}

I've also found http://www.barelyfitz.com/screencast/html-training/css/positioning/ on tab 2 explains how

"Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. The next element (div-after) did not move when we moved div-1. That's because div-1 still occupies that original space in the document, even though we have moved it."

`.p1_1` is not affecting `.p1_2`. `.p1_1` is appearing behind `.p1_2`. — hungerstar, Feb 01 '16 at 16:05
Ok - but if its positioned relatively why is it not pushing the 2nd one down? — Ukuser32, Feb 01 '16 at 16:06
When something is positioned relatively, it takes up the space it normally would in the document flow but is then shifted visually from that location. — hungerstar, Feb 01 '16 at 16:07
How can you substantiate that? I never normally have this problem (I float elements but need height% so am using relative) so how would I fix this? How/why is it shifted visually "from that location" and does it not stay there? — Ukuser32, Feb 01 '16 at 16:09
The `margin-top` is calculated on its parents width, that's why your math don't add up. — Asons, Feb 01 '16 at 16:31
No, I mean width. Change the width of the container and you'll see the margin top will change — Asons, Feb 01 '16 at 16:36
Agreed but how does the width suddenly start affecting the height?? — Ukuser32, Feb 01 '16 at 16:37
This post describes it well: http://stackoverflow.com/questions/11003911/why-are-margin-padding-percentages-in-css-always-calculated-against-width — Asons, Feb 01 '16 at 16:42
Thanks LGSon - I've upped your comment because it was a well explained answer in itself :) — Ukuser32, Feb 01 '16 at 17:05

Asons · Accepted Answer · 2016-02-02T09:07:02.020

Here is one way how to push 2 div's down by 10%, based on their parent's height, keeping them 70% and 20% of parent.

body {
  padding: 0;
  margin: 0;
}
.container {
  width: 30%;
  margin: 0 35%;
  background: yellow;
  position: relative;
  height: 900px;
}
.p1_1 {
  position: relative;
  width: 50%;
  height: 70%;
  left: 0;
  top: 10%;
  background-color: green;
}
.p1_2 {
  position: relative;
  width: 100%;
  height: 20%;
  border: 1px solid blue;
  top: 10%;
}

<div class="container">
  <div class="p1_1">
    top box
  </div>
  <div class="p1_2">
    hello box
  </div>
</div>

Two relative divs overlap each other

1 Answers1