Question: I have two small `div`-s inside a large `div`. When i add a `top` property to all of these divs, the smaller `divs` fall outside the borders of the larger `div`.

Jsfiddle is at,
 <http://jsfiddle.net/zqsyv5mj/>

1) Why does the smaller `div` fall outside when the outside div is not relatively positioned?

2) When i use margin-top instead of top, this issue vanishes. Why is it so?

Answer: 
Your larger `div` has no specific size, but it adds the sizes of its children which are `min-height: 100px` making it 200px in height. 

Then you instruct that the first position the kids can take inside the parent is 10px,10px (as they are `position: relative`), hence they overflow the parent.

With `margin-top` you move the parent to location 10px,10px but it's inside location stays 0,0 , hence the kids overlap the parent.
To answer you question, I think [here](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/) is a good explanation about `relative` css positioning by Css-Tricks

1. The smaller `<div>` do positioned relatively since you define `top:10px;` and `left:10px;`, the inner `<div>`'s move away 10 pixels from top and left. `position:relative;` will just serve as static if you didn't define any positioning attributes (top, left, etc...).
2. While `margin` do different things than `position`. You can easily test or play around with this by Inspect Element, if you are using Google Chrome(I'm not sure about other browser). So what does it do is just adding a margin between outer div and inner div, regardless the `position:relative`.

I hope this answered your question.