CSS Negative Margins for Positioning

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;
}

CSS Negative margins for positioning

If your divs have some margin between each other probably you didn't reset your margins and padding (see: http://meyerweb.com/eric/tools/css/reset/).

Generally speaking is not a bad thing to use negative margins, anyway if you are forced to set them almost everywhere probably you should refactor your css, because the result can be slightly different among the various browsers and this could lead to a big headache :) .

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

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.

Negative margin affects the absolute positioned div on same level

Just add this to #top :

float:right;
width:100%;

JSFiddle

Negative margin not the solution - but what is?

use

position: absolute;
top: 0; left: 0;
transform: translateY(-50%);

on your button

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

css positioning z-index negative margins

z-index is useless on a static positioned element. try position:relative. if negative margins don't work out for you, use top or bottom and negative values.

CSS Positioning: Creating exact overlap with negative margin is off by several pixels

Inline block has weird "bug" you could call it, that applies a 4px space between elements assuming a default font-size. This is created from the line-break between your div's. You'll find that you can fix this quite simply by making your negative higher.

margin-left: -104px;

This will fix your issue, but it's also not the only way to fix it.

---

You could do this... Instead of:

<div id=one></div>
<div id=two></div>

Delete the line-break between the div's so they are this:

<div id=one></div><div id=two></div>

This will also fix the issue.

---

You could alternatively set the font-size of their containing element to 0.

HTML:

<div class="container">
<div id=one></div>
<div id=two></div>
</div>

CSS:

.container { font-size: 0; }

But wait! There is more. You could comment out the line-break.

<div id=one></div><!--
--><div id=two></div>

---

You could drop the ending > to the beginning of the next element.

 <div id=one></div
><div id=two></div>

Usage of top and negative margin-top in css

Margin describes the space between your box and adjacent boxes. Setting a negative top margin indicates that you want negative spacing above your block. In simple words, margin to control the spacing between neighboring boxes and positive top-margin pushes content down, a negative top-margin pulls content up.

top and left on the other hand are positional attributes that specify where your box is located. The top left bottom right attributes specify the location of the respective edge of your box including its margin.

if you wanted the element to have no effect on the surrounding elements, you'd use top left bottom right

Check here for more info:

link

---

Related Topics