Negative Margins Vs Relative Positioning

Negative margins vs relative positioning

Relative positioning will shift the content to left, but the original space will be occupied by it unless you make the next element relative too. However with negative margin the content and its original space both are shifted.

CSS Using position relative+absolute or negative margin

There is nothing wrong with using absolute and relative positioning, they have been fully supported for a long time. Of your two methods I would definitely go with the absolute and relative position one as the margin one is a little hacky.

Personally I would use neither of your methods and instead put #small inside #big as it is a little more semantically correct (because #small is within #big).

See on jsFiddle

HTML

<div id="con">
    <div id="big">
        <div id="small"></div>
    </div>
</div>

CSS

#big {
    width:200px;
    height:200px;
    background:red;
    position:relative;
}
#small {
    position:absolute;
    width:50px;
    height:50px;
    margin-left:-25px;
    margin-top:-25px;
    left:50%;
    top:50%;
    background:blue;
}

Difference between position and margin

When you are using position:relative then it positions the element at it's normal location in the document flow, and then subsequently moves it to the offset position. The space it originally occupies is reserved in the layout (left empty).

FIDDLE DEMO for position: relative

Margins however is not positioning properties, infact it is a part of box model used to create block boxes on the page. It is the space that exists between the border edge of an element to that of next adjacent element.

FIDDLE DEMO for margin

Also check Negative margins vs relative positioning

Difference between margin and position

Your question is actually related to Box-Model which is controlled by Box-Sizing and others properties:

1. padding
2. margin
3. box-sizing
4. border

Strictly speaking, these properties control the box layout according to the box-model. Since not all part are obvious particularly margin, it may seem as it controls positioning but no.

Elements below an element with relative position and negative top value remain where they are

I am not really sure what you want to achieve, but I hope I get this right.
give the following CSS in your third <div>.Just check :)

   position: relative;
   top: -50px;

or,

   margin-top: -50px;

another way,

div {
    padding: 50px;
}
#div1 {
    background: yellow;
    width:100%;
}
#div2 {
    background: pink;
    position: relative;
    top: -50px;
    width:100%;
    float:left;
}
#div3 {
    background: gray;
    width:100%;
}

JSFiddle

How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

Negative margins are valid in css and understanding their (compliant) behaviour is mainly based on the box model and margin collapsing. While certain scenarios are more complex, a lot of common mistakes can be avoided after studying the spec.

For instance, rendering of your sample code is guided by the css spec as described in calculating heights and margins for absolutely positioned non-replaced elements.

If I were to make a graphical representation, I'd probably go with something like this (not to scale):

The margin box lost 8px on the top, however this does not affect the content & padding boxes. Because your element is absolutely positioned, moving the element 8px up does not cause any further disturbance to the layout; with static in-flow content that's not always the case.

Bonus:

Still need convincing that reading specs is the way to go (as opposed to articles like this)? I see you're trying to vertically center the element, so why do you have to set margin-top:-8px; and not margin-top:-50%;?

Well, vertical centering in CSS is harder than it should be. When setting even top or bottom margins in %, the value is calculated as a percentage always relative to the width of the containing block. This is rather a common pitfall and the quirk is rarely described outside of w3 docos

CSS positive relative positioning (top, left, bottom or right) with negative margin which cancel the summation of the values

With margin the element is really moved.

With top the displaying is moved, but the occupied place is not moved.

See this example:
http://codepen.io/OPiMedia/pen/NqwRZP

---

Related Topics