17

I want to know about a couple of conditions or circumstances in which we need to apply position:relative in CSS.

Barmar
  • 741,623
  • 53
  • 500
  • 612
  • The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position – Moorthy GK Dec 20 '12 at 10:53
  • 1
    @MoortyGK, `left:20` is incorrect and gets ignored by conforming browsers. – Jukka K. Korpela Dec 20 '12 at 10:59
  • yah!! i know if we write like left="20px", it will move the element 20px from left(adds 20px to left offset) from it's original position. –  Dec 20 '12 at 11:11
  • BUT according to other elements "the element {which is move}" is still at it's original position,and the space created is not filled up. –  Dec 20 '12 at 11:12
  • Now i got the answers!! Thanks to links provided to different sites in stackoverflow answers, Think about an outer box in which you want to add more inner boxes. you want inner boxes to be inside of that outer Box even if window maximizes or minimizes. That is the time to apply relative to outer box and absolute to inner box!!!! –  Dec 20 '12 at 11:32
  • There has been a similar question before: https://stackoverflow.com/questions/6003594/when-to-use-css-positioning The answer to that has a link to a useful blog about positioning. – jdtaylor Dec 20 '12 at 10:54
  • @JukkaK.Korpela why do you say that? MDN mentions nothing of the sort – Erez Cohen Oct 07 '20 at 17:41

3 Answers3

23

I mostly use position :relative in the element when I know the inner element of that element is going to be positioned absolutely.

For example If I have two divs and outside div is a static block and elements inside the outer div is going to be positioned absolute relative to the outer div. Then use position:relative for the outer div and inner div should use position:absolute. Now the inner div elements can be placed anywhere using top, bottom, left and right attributes of CSS.

Sahil
  • 1,959
  • 6
  • 24
  • 44
  • Yah!! Thats a good Answer.And as you explained "we need not to worry about relevant positions in inside block". they will be automatically adjusted. –  Dec 20 '12 at 11:16
  • Yes you are right... :), I watched few youtube tutorials when I was struggling with positioning in CSS and after that I am very confident of using position attribute. – Sahil Dec 20 '12 at 11:45
5

Best use of Position relative is with Position absolute. Read this link to understand properly CSS tricks website:

useful link

Surinder ツ
  • 1,778
  • 3
  • 16
  • 27
1

The element is positioned relative to its normal position, so "left:50" adds 50 pixels to the element's left position

KanzWebDev
  • 17
  • 2