Position Relative vs Absolute

Question

What is the difference between position  relative and position  absolute in CSS  And when should you use them

User · Answer

Another thing to note is that if you want a absolute element to be confined to a parent element then you need to set the parent element's position to relative. That will keep the child element contained within the parent element and it won't be "relative" to the entire window.

I wrote a blog post that gives a simple example that creates the following affect:

enter image description here

That has a green div that is absolutely positioned to the bottom of the parent yellow div.

1 http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/

User · Answer

Relative               vs           Absolute     Difference  relative to itself   relative to the nearest positioned ancestor  Difference  Other elements arounds it honour its old existence  Other elements around it DO NOT honour its old existence  Similarity  Other elements arounds it DO NOT honour its new existence  Other elements around it DO NOT honour its new existence

User · Answer

Let s discuss a scenario to explain the difference between absolute vs relative   Inside the body element say you have an header element whose height is 95  of viewheight i e 95vh  Within this container you placed an image and reduced it s opacity to say 0 5  And now you want to place a logo image near the top left corner  I hope you understood the scenario  So you will have a lighter image in the header section with a logo on the top of it at the specified position   But before starting this  i have set margin and padding to 0 like this         margin 0px     padding 0px     box-sizing  border-box       This ensures no default margins and padding is applied to elements   So you can achieve your requirement in two ways   First Way   you give a class to the image say logo  in css you write    logo      float left      margin-top 40px      margin-left 40px      this placed the logo to the 40px from the top and left of the enclosing parent which is the header  The image will appear as if it placed as desired     But my friend this is a bad design as to place an image you unnecessarily consumed so much of space around by giving it some margin when it was not required  All you needed is to place the image to that location  You managed it by cushioning it with margins around  The margin took space and pushed it s content deeper giving an impression that it is positioned exactly where you wanted  Hope you understood the issue by working it around like this  You are taking more space than required to place just an image at the desired location   Now let s try a different approach   Second Way   the image with logo class is inside the header element with say header class  So the parent class is header and the child class is logo as before   you set the position property of the header class to relative like this   header     position  relative     then you added the following properties to the logo class   logo      position absolute       top 40px      left 40px      There you go  You placed the image at exactly the same place  There won t be any apparent difference in the positioning from the naked eye between the first approach and second approach  But if you inspect the image element   you will find that it has not taken any extra space  It s occupying exactly the same area as much as it s own width and height   So how is this possible  I said to the image logo class that you will be placed relative to the header class as you are the child of this class and that i specifically mentioned it s position as relative  So that any child of it s will be placed relative to it s top left corner  And that Your position need to be fixed inside this parent element  so you are given absolute  And That you need to move a little from top and left to the position i want you to be  Hence you are given top and left property with 40px as value  In this way you will be placed relative to your parent only  So if tomorrow i move your parent up or down or just anywhere  you will always be 40px to the top and left of your parent header s top left corner  So your position is fixed inside your parent no matter whether your parent s position is fixed or not in future as it is not absolute like you     So use relative and absolute for parent and child respectively  Secondly use it when you want to only place the child element at some location inside it s parent element  Do not use fillers like margins to push it forcibly  Give parent relative value and child which you want to move  the absolute value  Specify top  left bottom or right property to child class to place it inside parent anywhere you want   Thanks

User · Answer

Both    relative    and    absolute    positioning are really relative  just with different framework     Absolute    positioning is relative to the position of another  enclosing element     Relative    positioning is relative to the position that the element itself would have without positioning   It depends on your needs and goals which one you use     Relative    position is suitable when you wish to displace an element from the position it would otherwise have in the flow of elements  e g  to make some characters appear in a superscript position     Absolute    positioning is suitable for placing an element in some system of coordinates set by another element  e g  to    overprint    an image with some text   As a special  use    relative    positioning with no displacement  just setting position  relative  to make an element a frame of reference  so that you can use    absolute    positioning for elements that are inside it  in markup

User · Answer

Absolute will make your element out of your flow layout  and it will be positioned to the closest relative parent  all parents are static by default    That s how you use absolute and relative together most of the time  You can also use relative alone  but that is very rare case  I have made an video to explain this  https   www youtube com watch v nGN5CohGVTI

User · Answer

Putting an answer   as my reputation aint enough to comment  But dont look at this as an answer  just a additional info  as myself  had some problems with both footer  and positioning   When setting up the page  so that my footer always stays at the bottom  with position absolute  and main container wrapper with relative position   I then found some issues with my text content  and a menu inside the same content white part of page between header and footer   when setting these to absolute  footer no longer stays down   Postitioning is  as you say a complex theme   My solution  to the content I wanted in  absolute  positon in my webpage  and not be pushed to the side  when in example opening a drop down menu  was to actually give it postition relative  and putting it 35em below my drop down menu   35em is the heigth of my dropdown menu  when fully extended   Then  Top -35em  for the content that before was pushed to the side  And then adding margin-bottom -35em  This way  the content is  below  my drop down menu  but visually it is side by side with my drop down menu  And the white space below down to the footer  is with only 10em margin  as it was before starting to play around with this  So my solution to this was like this      html  body       margin 0      padding 0      height 100      h1       margin 0         webpage       position relative      min-height 100       margin 0      overflow auto          header       height 5em      width 100       padding 0      margin 0          text       position relative     margin-bottom -32em      padding-top 2em      padding-right 2em      padding-bottom 10em      background-repeat no-repeat      width 70       padding-left auto      margin-left auto      margin-right auto      right 10em      float right      top -32em           dropdown    position absolute      left 0      width 20       clear both      display block      position relative      top 1em      height 35em          footer       position absolute      width 100       right 0      bottom 0      height 5em      margin 0       margin-top 5em      I see your question is answered good  but after alot of troubleing I found this to be a very good solution  and a way to understand better how positioning works   When I place my text content  below my drop down menu  it doesn t push my text to the side  If I changed the text to position absolute  the footer did not stay in place  As I can believe this is an issue for more people then me  I add this here  What in fact happends  is I put the text  35ems  below my drop down   Then  I visually put it right next to eachother  with relative position  and top -35em   and evening out the huge space below  with margin -35em   negative values are underestimated at times  very good functionality  when one understands these positions better    Natually  fixed position  also seemed logic for my footer  but I do really want the footer to go below the viewport  if the text  or content  is longer than the viewport  And to stay at the bottom  if there is little content on the page   This setupp fixed that very nicely  and remember to use  em   not  px  for a more fluid dynamic page layout       there may be better solutions  but this works for me cross platforms  as well as devices

User · Answer

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   Here is a good tutorial http   www barelyfitz com screencast html-training css positioning  with the sample usage of both position with respective to absolute and relative positioning

User · Answer

Absolute CSS Positioning  position  absolute   Absolute positioning is the easiest to understand  You start with the CSS position property   position  absolute    This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page  It won t affect how the elements before it or after it in the HTML are positioned on the Web page however it will be subject to it s parents  positioning unless you override it   If you want to position an element 10 pixels from the top of the document window  you would use the top offset to position it there with absolute positioning   position  absolute  top  10px    This element will then always display 10px from the top of the page regardless of what content passes through  under or over the element  visually    The four positioning properties are    top right bottom left   To use them  you need to think of them as offset properties  In other words  an element positioned right  2px is not moved right 2px  It s right side is offset from the right side of the window  or its position overriding parent  by 2px  The same is true for the other three   Relative Positioning  position  relative   Relative positioning uses the same four positioning properties as absolute positioning  But instead of basing the position of the element upon the browser view port  it starts from where the element would be if it were still in the normal flow   For example  if you have three paragraphs on your Web page  and the third has a position  relative style placed on it  its position will be offset based on its current location-- not from the original sides of the view port   Paragraph 1   Paragraph 2   Paragraph 3  In the above example  the third paragraph will be positioned 3em from the left side of the container element  but will still be below the first two paragraphs  It would remain in the normal flow of the document  and just be offset slightly  If you changed it to position  absolute   anything following it would display on top of it  because it would no longer be in the normal flow of the document   Notes     the default width of an element that is absolutely positioned is the width of the content within it  unlike an element that is relatively positioned where it s default width is 100  of the space it can fill  You can have elements that overlap with absolutely positioned elements  whereas you cannot do this with relatively positioned elements  natively i e without the use of negative margins positioning      lots pulled from   this resource

User · Answer

Marco Pellicciotta  The position of the element inside another element can be relative or absolute  about the element it s inside   If you need to position the element in the browser window point of view it s best to use position fixed

User · Answer

Relative    Relative to it   s current position  but can be moved  Or A RELATIVE positioned element is positioned relative to ITSELF   Absolute   An ABSOLUTE positioned element is positioned relative to IT S CLOSEST POSITIONED PARENT  if one is present  then it works like fixed     relative to the window    lt div style  position relative  gt   lt  --2nd parent div-- gt       lt div gt     lt  --1st parent div-- gt           lt div style  position absolute left 10px        gt   lt  --Middle div-- gt            Md  Arif         lt  div gt       lt  div gt   lt  div gt    Here  2nd parent div position is relative so the middle div will changes it s position with respect to 2nd parent div  If 1st parent div position would relative then the Middle div would changes it s position with respect to 1st parent div  Details

[css] Position Relative vs Absolute?

Examples related to css