-5

This link says

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>

So absolute is in fact relative. So why not just use relative instead? Are there any practical use cases which can only be done by using absolute positioning but not relative?

Michael Petrotta
  • 59,888
  • 27
  • 145
  • 179
Howard
  • 19,215
  • 35
  • 112
  • 184
  • See [this question](http://stackoverflow.com/questions/2275084/why-shouldnt-i-use-positionabsolute-for-positioning-everything). – sameetandpotatoes Aug 10 '13 at 04:33
  • 1
    "So Absolute is in fact Relative." Uh, no. You're gravely oversimplifying the sentence you just quoted, even for something from W3Schools. – BoltClock Aug 10 '13 at 04:34
  • 1
    No, `absolute` is removed from the normal flow. It does not take up space within the normal page flow. `Relative` styled blocks take up space within the flow, regardless of what other styling is applied. – abiessu Aug 10 '13 at 04:34
  • [W3fools](http://www.w3fools.com) is a terrible reference and [`relative` is _not_ the same as `absolute`](http://www.w3.org/TR/CSS2/visuren.html#comparison) – steveax Aug 10 '13 at 04:35
  • possible duplicate of [Difference between style = "position:absolute" and style = "position:relative"](http://stackoverflow.com/questions/4457790/difference-between-style-positionabsolute-and-style-positionrelative) – Wesley Murch Aug 10 '13 at 04:40
  • Here read this: https://developer.mozilla.org/en-US/docs/Web/CSS/position – aug Aug 10 '13 at 04:44
  • Here's yet another link that might be more informative then the notoriously misleading w3schools: http://reference.sitepoint.com/css/positioning – Wesley Murch Aug 10 '13 at 04:45

2 Answers2

3

So absolute is in fact relative.

NO, both are completely different, their rendering is completely different.

A relative positioned element is in the document flow whereas an absolute positioned element is out of the document flow.

Are there any practical use cases which can only be done by using absolute positioning but not relative?

Assume that you want a title on image hover, you need to position the title containing element absolute to the element holding image which has to be positioned relative. If you do not assign position: relative; to the element holding absolute positioned elements, your absolute positioned elements will just flow out in the wild.

Case

Case 2 (If element is not positioned relative, your absolute positioned elements will flow out in the wild)

So inshort, you can say that the absolute positioned elements DO NOT take any physical space on the document as they are out of the flow so inorder to save them flowing out in the wild, we use a container element positioned relative, where relative positioned do take space as they are in the flow so when you move your absolute positioned elements anywhere on the page, they won't affect any other elements position but if you move your position: relative; element anywhere on the page, yes it will affect other elements - static or relatively positioned around it.

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
1

An element with relative positioning remains within the flow of the document. Any additional positioning you provide will offset the element from this position.

An element with absolute positioning is removed from the flow of the document, and is positioned with respect to its first nonstatic parent element.

So let's say you have the following HTML structure, and an accompanying fiddle:

<div class="awesomeParent">
  <ul>
    <li>First Piggy</li>
    <li>Second Piggy</li>
    <li>Third Piggy</li>
    <li>Fourth Piggy</li>
  </ul>
</div>

Now checkout the same fiddle, modified a bit using relative and absolute positioning. See the difference?

In the second fiddle, using relative positioning, the space where the third list element should be is preserved. It's only being offset by the additional top: 40px; rule.

However, in the third fiddle, using absolute positioning, the space where the third list element should be is gone. In other words, that element is no longer in the normal flow of the document, and now the positioning rule top: 40px; is with respect to it's first nonstatic parent. In this case, this is the div .awesomeParent, which has a position: relative. If no parent had been found, then the element would have been positioned with respect to the html element. So in order to position an element absolutely within another element, you'll need to use position fixed, absolute or relative on the parent itself.

Images so you can compare the three:

No positioning applied Relatively positioned enter image description here

godfrzero
  • 2,230
  • 1
  • 26
  • 31