Html – Negative margins vs relative positioning

csscss-positionhtmllayoutmargin

I've come across many layout techniques involving negative margins, such as this classic for sidebar positioning. It seems like these techniques could just as easily be applied with relative positioning.

So instead of this:

.sidebar {
    margin-left:-600px;
}

One would do this:

.sidebar {
    position:relative;
    left:-600px;
}

It seems like relative positioning might even be cleaner in the vertical direction,
as top-margin manipulation may be affected by collapsing margin issues, etc.

Is there any advantage to one over the other, or are they practically equivalent?

Thanks-

Best Answer

I guess 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.

Related Solutions

Javascript – Retrieve the position (X,Y) of an HTML element

The correct approach is to use element.getBoundingClientRect():

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

Internet Explorer has supported this since as long as you are likely to care about and it was finally standardized in CSSOM Views. All other browsers adopted it a long time ago.

Some browsers also return height and width properties, though this is non-standard. If you're worried about older browser compatibility, check this answer's revisions for an optimised degrading implementation.

The values returned by element.getBoundingClientRect() are relative to the viewport. If you need it relative to another element, simply subtract one rectangle from the other:

var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from <body>');

Html – Can you do this HTML layout without using tables

There is nothing wrong with using the tools that are available to you to do the job quickly and correctly.

In this case a table worked perfectly.

I personally would have used a table for this.

I think nested tables should be avoided, things can get messy.

Best Answer

Related Solutions

Javascript – Retrieve the position (X,Y) of an HTML element

Html – Can you do this HTML layout without using tables

Related Topic