Margin-top pushing overlay down
# January 17, 2013 at 11:23 am
I think this may be a fairly common/newbish question but I’ve never found a decent answer I can understand without reading 10 pages of posts.
I have a single container that has a margin-top of 10px. Easy enough.
I have an overlay container that will act as a modal overlay that covers the entire screen. It’s fixed 100% of the screen.
Why does the margin on the first element push everything down?
[The Pen!](http://codepen.io/anon/pen/yweaF “The Pen!”)# January 17, 2013 at 11:49 am
This reply has been reported for inappropriate content.
If you want that first element on the page to have space between it and the top of the page… what do you do without a margin on the element… or padding on the body?
Both have the same effect I’m trying to side-step.# January 17, 2013 at 1:16 pm
The margin on .first-element is actually sticking out of the parent (body in this case). This is normal and correct behavior. Normally you can stop it from doing so with a top margin or top padding on the parent, or overflow: hidden; on the parent – giving it a new formatting context which gives the element’s top margin something to ‘push’ against. In this case the overflow method won’t work – unless you also give html overflow: hidden; (body and html can sometimes behave differently than a block level parent element). A simple fix is to give .overlay top: 0;
You must be logged in to reply to this topic.