0

I'm currently learning CSS and I'm stuck in the positioning Relative and Absolute. I understand that these two property are used to define the exact location we want our items to be placed, but however what I don't understand is when we can use Margins and Paddings to define the position of these items, why is there a need still to use Absolute and Relative as it's completely pointless.

A good example I would like to highlight is here http://www.w3schools.com/css/tryit.asp?f... we can just replace position: absolute; with float: right; and it achieves the exact same thing, so what are we still doing with Relative and Absolute position?

Mikeows
  • 11
  • 1
  • Relative will adjust to different screen resolutions, or resizing of the browser. Meaning, the website should look the same, but smaller/bigger. Absolute will not adjust and will make things a certain size. – The Brofessor Aug 04 '15 at 00:14
  • You can not learn this two in one go. You will have to go through various examples until you fully understand them but I suggest the following video which is awesome: https://www.youtube.com/watch?v=aFtByxWjfLY – EugenSunic Aug 04 '15 at 00:17
  • possible duplicate of [Position Relative vs Position Absolute?](http://stackoverflow.com/questions/10426497/position-relative-vs-position-absolute) – kittykittybangbang Aug 04 '15 at 00:17
  • `float: right`, `position: absolute` and `position: relative` behave completely different ([demo](http://jsfiddle.net/Lsenuxbb/)). Have you at least tried them? – Oriol Aug 04 '15 at 00:54

2 Answers2

1

Position: relative

  • makes sure that an element is positioned relative to it's normal position
  • the element will not be deleted out of the normal document flow
  • it maintains the reserved space and may overlay other elements

Position: absolute

  • is positioned relative to it's first parent who has another position than position:static
  • if such a parent doesn't exists, then the containing block will be the html element
  • the element will be deleted out of the normal document flow. The other elements will act as if the element doesn't exist.
  • can overlay other elements

Example css code for position:relative :

selector{
  position: relative;
  left: 150px;
  top: 50px;
  }

Example css code for position:absolute : 

parentselector{
  position: relative;
  }

selector{
      position: absolute;
      left: 150px;
      top: 50px;
      }

Padding and margin have nothing to do with the exact position of their element.

Thoaren
  • 194
  • 9
0

http://learnlayout.com/position.html contains a good summary about the position property.

  • static is the default value of the position property.
  • relative behaves the same as static unless you add some extra properties which shifts the element out of its regular position.
  • A fixed element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
  • absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling. Remember, a "positioned" element is one whose position is anything except static.

It comes with examples which help you to understand it well if you follow them with diligence.

z--
  • 2,186
  • 17
  • 33