Why Does Margin-top Affect The Placement Of An Absolute Div?

I have two divs in this jsFiddle - http://jsfiddle.net/z4062jfn/ - with absolute positioning. I didn't expect any margin values given to the divs to affect their absolute position.

Solution 1:

The simple factual explanation for why this happens is that the offset properties top, right, bottom and left actually respect the corresponding margin properties on each side. The spec says that these properties specify how far the margin edge of a box is offset from that particular side. The margin edge is defined in section 8.1.

So, when you set a top offset, the top margin is taken into account, and when you set a left offset, the left margin is taken into account.

If you had set the bottom offset instead of the top, you'll see that the bottom margin takes effect. If you then try to set a top margin, the top margin will no longer have any effect.

If you set both the top and bottom offsets, and both top and bottom margins, and a height, then the values become over-constrained and the bottom offset has no effect (and in turn neither does the bottom margin).

If you're looking to understand why the spec defines offsets this way, rather than why browsers behave this way, then it's primarily opinion-based, because all you'll get is conjecture. That said, Fabio's explanation is quite reasonable.

Solution 2:

Because an absolutely positioned box is removed from the normal flow and is assigned a position with respect to the containing block. If you don't define a containing block, then it's body.

So, with that in mind, think of the containing block as a coordinates axis that starts at top left. If you give your element this properties:

    position: absolute;
    top:100px;
    left:100px;

just like you did, you will have leave an empty space above and left, thus, if you apply margin-top or margin-left, it will work, because your elements are capable to virtually go through every pixel of both axises up to that 100px top and 100px left position, and same applies for negative margins. However, since position:absolute removes the element from the flow and any impact on any subsequent sibling element, it's easy to see that nothing can happen after the element "finishes", hence margin-bottom and margin-right won't work since they don't have anything to get margin from.

I have made an image to show the behavior since my explanation might be a bit obscure

Solution 3:

Your margin bottom is not working since you put the top property in your divs. Remove top and your margin bottom will work for your #box1.

Solution 4:

Margin-bottom affect too. See the code below, if you set a bottom reference in #box1 it will apply 20px in margin-bottom.

http://jsfiddle.net/t5ooot7u/

#box1 {
    width:200px;
    height: 100px;
    background-color:gold;
    position: absolute;
    bottom:230px;
    left:100px;
    margin-bottom:20px;

}