0

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.

#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;

}

panel-pic goes wrong!

4

2 回答 2

2

I think you're mixing the two. :) The parent should be relative and all elements you want to place relative-ly to it, should be absolute. So just change #top's position to relative, and all others to absolute.

于 2013-03-30T22:09:39.480 回答
0

under #panel-pic p {

margin-top: 175px;

should be

margin-top: 0px;

working example: http://jsfiddle.net/gy3FU/7/

于 2013-03-31T06:06:34.217 回答