0
body {
    margin: 0;
}

.wrap {
    width: 800px;
    height: 1000px;
    position: relative;
    margin: auto;
    background: #e3e3e3;
}

.box {
    width: 400px;
    height: 400px;
    margin: auto;
    background: red;
    position: absolute;
    left: 20px;
    top: 30px;  
}

I have a little markup and some css which i'm learning from , Please tell me why .wrap which contains .box needs to be relative and the other absolute. Whycan't both be absolute,or relative. This may be a stupid question but no matter how many tutorials I read , I can't get around this . Detailed Anwer Please.

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
Nihal Sahu
  • 189
  • 1
  • 2
  • 13

4 Answers4

6

Absolute positioning means that the element is taken completely out of the normal flow of the page layout. As far as the rest of the elements on the page are concerned, the absolutely positioned element simply doesn't exist. The element itself is then drawn separately, sort of "on top" of everything else, at the position you specify using the left, right, top and bottom attributes.

Using the position you specify with these attributes, the element is then placed at that position within it's last ancestor element which has a position attribute of anything other than static (static is the positioning elements use if they have no position attribute specified), or the document body (browser viewport) if no such ancestor exists.

For example, if I had this code:

<body>
  <div style="position:absolute; left: 20px; top: 20px;"></div>
</body>...then the <div> would be positioned 20 px from the top of the browser viewport, and 20px from the left edge of same.

However, if I did something like this:

<div id="outer" style="position:relative">
   <div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
 </div>...

then the inner div would be positioned 20px from the top of the outer div, and 20px from the left edge of same, because the outer div isn't positioned with position:static because we've explicitly set it to use position:relative.

Relative positioning, on the other hand, is just like stating no positioning at all, but the left, right, top and bottom attributes "nudge" the element out of their normal layout. The rest of the elements on the page still get laid out as if the element was in its normal spot though.

For example, if I had this code:

<span>Span1</span>
<span>Span2</span>
<span>Span3</span>...

then all three elements would sit next to each other without overlapping.

If I set the second to use relative positioning, like this:

<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>...

then Span2 would overlap the right side of Span1 by 5px. Span1 and Span3 would sit in exactly the same place as they did in the first example, leaving a 5px gap between the right side of Span2 and the left side of Span3.

Hope that clarifies things a bit

For more details refer to this: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

This is also a good one : http://sitepoint.refererence.sitepoint.com

Sai Avinash
  • 4,683
  • 17
  • 58
  • 96
1

position:relative

If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

position:absolute

When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

see examples and more at Learn More at ammanu

0

position absolute

An absolute position element is positioned relative to the first parent element that has a position other than static.Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.Absolutely positioned elements can overlap other elements.

position relative

A relative positioned element is positioned relative to its normal position.The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.

WhiteLine
  • 1,919
  • 2
  • 25
  • 53
0

Absolute positioning: Element is positioned relative to first non-staticly(e.g.relative) positioned parent element in hierarchy.
Relative positioning: Element is positioned relative to its own position determined by browser in flow of rendering document.

So, Considering wrap element is supposed to be a wrapper around box element -> you need wrap as relative and box as absolute.

codermd
  • 720
  • 4
  • 13