weird CSS behavior relative div nested in a div

Question

dummy question but can't figure out why.

i have this code in the following JsFiddle

<div>
  <div style="position: relative; border: 1px solid green">
      <div style="height: 160px; position: absolute; left: 0; right: 0; top: 0; border: 1px solid red">TOP DIV</div>
      <div style="margin-top: 160px; border: 1px solid blue">BOTTOM DIV</div>
  </div>
</div>

This code workds fine, as expected. But when i remove "border: 1px solid green" in the second div, i get a behavior that i don't understand at all.

<div>
  <div style="position: relative;">
      <div style="height: 160px; position: absolute; left: 0; right: 0; top: 0; border: 1px solid red">TOP DIV</div>
      <div style="margin-top: 160px; border: 1px solid blue">BOTTOM DIV</div>
  </div>
</div>

Why applying a border has an effect on a parent element position ? An why this behavior ? This makes no sense to me, if some CSS master could give me a logical explanation i would be greatful !

Thank you