Two relative divs overlap each other - html

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."

Answer 1

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>