I see what you mean by the
#inner box not moving out of the
#outer box. I'll be looking into this as well.
EDIT2: ABSOLUTE POSITIONING
The reason why it doesn't work like what you expected is because of the
margin-left property. I believe
margin property in general will not allow the
#inner to ignore it's parent...which is
If you change
margin-left to just
left (leaving other code the same), then I believe it works the way you want it to:
/*Add your CSS here!*/
EDIT 3: RELATIVE POSITIONING
As for the
relative positioning, I don't think it will ignore the parent even though the parent is static.
relative focuses on moving the element from where it should have been. If you removed all positioning in the CSS, you'll see that the
#inner box is inside the
#outer box on the top-left. That means this is
#inner box's initial position. So by making it
relative and doing
margin-left will move it left from its initial position.
Someone else can clarify this too. These are just the conclusions I came to when I was exploring/experimenting.