0

I always hear that the main difference between relative and absolute that absolute can be placed out of its parent boundary!

if I can do same thing absolute does using relative, so what is the advantage of using absolute over relative>

An example 

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
   .first_div {
       width:300px; 
       height:300px; 
       background-color:red;
       margin: 50px auto;  
 
    }
    
   
   
    .second_div {
        width:140px; 
        height:140px; 
        background-color:green; 
         position: relative;
        top: 50px;
        right: 80px;
        
    }
    
    
  
    
</style>
<div  class="first_div">
    <div class="second_div"></div>
 

</div>

as you see I can place the green square anywhere in the page using relative same as absolute does

So what's the main advantage of using absolute over relative ?

Ahmadz Issa
  • 669
  • 3
  • 12
  • 36
  • 1
    Possible duplicate of [Difference between relative and absolute](http://stackoverflow.com/questions/6997895/difference-between-relative-and-absolute) – t.niese Mar 25 '17 at 19:08
  • The _origin_ of a `relative` positioned element is its original position, it is just an _offset_ to is original position. The _origin_ of an `absolute` positioned element is the position of the closest non `static` positioned ancestor. – t.niese Mar 25 '17 at 19:10
  • if I can do same thing absolute does using relative, so what is the advantage of using absolute over relative , I'm not asking how it works. – Ahmadz Issa Mar 25 '17 at 19:13
  • 1
    You **cannot** do the same thing `absolute` does with `relative`. If you position an element `relative` then it is just a visual offset the element will still occupy the space at its original place, and it will move if it would move at its original position. Elements that are position `absolute` are taken out of the original layout, and are only positioned relative to the offset parent [see this fiddle](https://jsfiddle.net/yv5dth7m/2/) – t.niese Mar 26 '17 at 10:42
  • Yeah yeah that's it absolute will remove the original space of the container, that's the main difference I didn't notice this. Thanks a lot – Ahmadz Issa Mar 26 '17 at 18:11

2 Answers2

0

I would avoid both if possible because mobile devices go haywire when you focus on an input, for example, that is positioned this way. The keyboard display pops up and you're input is now covered up and your UI is hosed.

Stick with margin.

Ronnie Royston
  • 16,778
  • 6
  • 77
  • 91
  • sometime I need absolute or relative to place something on its parent, while margin move things within the parents boundary, can't move things out of it as positions does otherwise I always use margin and padding. – Ahmadz Issa Mar 25 '17 at 19:37
  • Nah. You'll see. Try your page on a mobile after using `position`... ...just tryin to help – Ronnie Royston Mar 25 '17 at 19:48
  • You mean it will move around right? I mean it will change the current position you set. By using relative this issue won't happen. unless you mean something else I will try to open the site on my phone to see what will happen. Thank you. – Ahmadz Issa Mar 25 '17 at 19:54
  • 1
    Right. I did exactly what you are doing already and after hours of pretty'ing it up I decided to check it out on my Samsung phone and when I interacted with `position`ed elements the UI got really ugly. – Ronnie Royston Mar 25 '17 at 20:22
0

The advantage of absolute is that you can easily position your div anywhere you want with "bottom:"";, top:"";, right:""; and left:""; - however this cause problems when you are making responsible websites - unless your absolute element is in a relative element.

Carsten Andersen
  • 162
  • 1
  • 13
  • I can place my div anywhere in the page using relative as well. See the example you can move it anywhere you want in the page same as absolute does! – Ahmadz Issa Mar 25 '17 at 19:35
  • Thanks I read it and I understand that the absolute position according to the first none static thing. But to make it easier when I should use absolute and when should I use relative, because both can do same thing exactly that's what I want to know. – Ahmadz Issa Mar 25 '17 at 19:51
  • Well, when relative works, use it. I almost never use absolute. Please consider choosing this as the right answer if you feel it helped you. – Carsten Andersen Mar 25 '17 at 20:58
  • I will choose yours if no one put an answer today. Thank you for your effort. – Ahmadz Issa Mar 25 '17 at 21:56