Clever Geek Handbook

Why does margin-top affect the placement of the absolute div?

I have two divs in this jsFiddle - http://jsfiddle.net/z4062jfn/ - with absolute positioning. I didn't expect any margin values ​​provided by divs to affect their absolute position. And this is true for the margin-bottom value given to the top div (uncomment line 8 CSS). But the margin-top value assigned to the bottom tier (uncomment line 19 of CSS) moves the bottom div position down by that amount.

What is there in this situation that allows the margin rule to override the absolute position rule - sometimes?

<div id="box1"><p>box 1</p></div>
<div id="box2"><p>box 2</p></div>
+3


source to share


4 answers


Simple actual explanation of why this happens is that the properties of displacement top

, right

, bottom

and left

indeed correspond to the respective properties of the field on each side. spec says that these properties determine how much the margin edge is offset from that particular side. The edge of the edge is defined in section 8.1 .

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

If you set the bottom offset instead of the top, you will see the bottom margin take effect. If you then try to set the top margin, the top margin will no longer have any effect.



If you set both top and bottom offsets, as well as top and bottom margins and height, the values ​​become overly constrained and the bottom offset has no effect (and in turn, the bottom margin).

If you want to understand why the spec defines offsets this way, and not why browsers behave this way, then that is primarily opinion based, because all you get is hypothesis. However, Fabio's explanation is perfectly reasonable.

+4


source


Because the absolutely positioned block is removed from the normal flow and given a position relative to the containing block. If you don't define a containing block, then it is body

.

So with that in mind, think of a block-box as a coordinate axis that starts at the top left. If you give an element the following properties:

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


like you, you will leave white space at the top and left, so if you apply margin-top or margin-left it will work because your elements are able to actually traverse every pixel of both axes to 100px top and 100px to the left, while also for negative margins. However, since it position:absolute

removes the element from the flow and has any effect on any subsequent sibling element, it's easy to see that nothing can happen after the element is "finished", so margin-bottom and margin-right won't work as they have nothing to get the margin.

I made an image to show the behavior as my explanation might be a little unclear

enter image description here

+2


source


Yours margin bottom

doesn't work from the moment you place the property top

in your divs. Delete top

and yours margin bottom

will work for yours #box1

.

0


source


The influence of the marginal bottom is also. See the below code, if you set the bottom link in box # 1 it will apply 20px at the bottom of the box.

http://jsfiddle.net/t5ooot7u/

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

}
0


source






More articles:


All Articles