CSS Using position relative+absolute or negative margin

Question

I want to put a small div (50x50) on the center of another div (200x200).

I got 2 ways to do it:

position:relative
position:absolute
top:75px;
left:75px;

or

Using negaive margin

margin:-125px 0 0 75px;

I would like to know which way is better and why...
I heard some people saying that position is not recommended.. is that true? why?

EDIT:
The divs are exmaples.
In reality I got image above another image (youtube preview image, and play button image above it).
The Images are inside accordion, and in ie6 closing the accordion/open it cause the absolute container to float above everything...

There is no problem with `position` at all. It has "side-effects" of course, but if you are aware of them, you should use them where appropriate. Voted to close the question as "not constructive". — kapa, Mar 09 '13 at 09:30
[vertical and horizontal align (middle and center) with css](http://stackoverflow.com/questions/5421334/vertical-and-horizontal-align-middle-and-center-with-css). — Vucko, Mar 09 '13 at 10:08
@Vucko the divs are examples. in reality I got img above another img.. can use the solution in ur link. — Ron, Mar 09 '13 at 10:49
Is IE6 support essential? It's currently sitting at 0.6% usage and dropping. The cost to support it across an application is way more than it's worth. http://www.w3counter.com/trends — Daniel Imms, Mar 09 '13 at 11:43

score 4 · Accepted Answer · answered Mar 09 '13 at 09:39

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

the divs are just examples. in reality I got img above another img. cant use your build anyway.. — Ron, Mar 09 '13 at 10:47

score 1 · Answer 2 · answered Mar 09 '13 at 09:38

1

Using margin is better ! If you use

position:relative
position:absolute

You need understand correlative with div outside

answered Mar 09 '13 at 09:38

Iron Hoang

179
1
2
12

score 1 · Answer 3 · edited May 23 '17 at 11:45

Position is not recommended for people who don't know how to use it, for the rest of us, it works perfectly fine.

I would definitely not use a negative margin.. like Tyriar said it's hacky and also it's not easy to read.

as for the ie6 bug, you there are bugs aplenty with ie's, the way to address them is by complimenting your otherwise sound html/css with fail safe code, rather than degenerating your sound html into hacky html for ie's sake.

score 0 · Answer 4 · answered Aug 23 '22 at 04:27

i had same challenge in my previous project, where i had to choose to between position absolute + relative and negative margin, and i had seen that when we use negative margin it's way more easier to maintain design for responsiveness, and also when design are bit complex and needs to be responsive using negative margin is good option whereas design are simple using relative + absolute goes fine.

CSS Using position relative+absolute or negative margin

4 Answers4