Relative positioning goes wrong according to absolute

[shmp30]

So I made JsFidle link and I'm troubled about relative and absolute positiong. So I made absolute div called top. I've got relative long (wide) blue panel with title that is positionend properly - top 0px. but when i'm making 2nd div in div id=top it has relative positioning top=70px (70 px is size of wide blue panel above). Sounds okey, right? But it isn't. I have no idea why It has so bad positoning . its relative to div="top" div, right? So why it moves so to bottom. Help please.\[code\]#top {position: absolute;top:0;height:420px;#panel {margin:auto;position:relative;top:0px;#panel-pic {position: relative;top: 70px;height:350px;background-color:black;background-position: center;background-size:cover;box-shadow: 1px 1px 9px black;\[/code\]}panel-pic goes wrong!