When to exactly use position relative

Question

I am not much expert in css. I did not give any position and have css like

#myId{
    margin-left: 10px;
    margin-top: 10px;
}

#myId{
    position: relative;
    left: 10px;
    top: 10px;
}

Both did exactly what i wanted. When should i use relative position exactly. Any advantage or disadvantage over other?

Because maybe he is learning something new and is an expert on something else? — thepio, May 09 '16 at 07:46
Yes because he is Pradeep. Basically a web developer. Work experience completely on LAMP Stack, Drupal. — Kaushal Suthar, May 09 '16 at 07:48
What does LAMP have to do with CSS? Obviously he's an backend developer, not a frontend. — Vucko, May 09 '16 at 07:49
Possible duplicate of [Why not use margin positioning instead of using position:relative top 5px?](http://stackoverflow.com/questions/16050924/why-not-use-margin-positioning-instead-of-using-positionrelative-top-5px) — Vucko, May 09 '16 at 07:51
`position` property allows you to dictate an element's position within the DOM by it's relative position from itself (relative), another positioned element like if it's parent is positioned (absolute), or it's relative position in relation to the viewport (fixed). Any positioned element is out of the "flow", therefore it's presence will not directly affect those elements that are non-positioned. The positioned elements also enjoy the benefit of using the `z-index` property. See this [article](https://developer.mozilla.org/en-US/docs/Web/CSS/position) — zer00ne, May 09 '16 at 07:51

Justinas · Accepted Answer · 2016-05-09T08:54:33.450

Case 1

You have inner element that is positioned absolute and want that element to stick to it's parent. Than you apply position: relative to parent element. By default absolute element pops out from DOM flow and takes position from closest relative element (html by default)

Case 2

You want to move element but still keep it in DOM flow. Than apply position: relative and move it with left/right/top/bottom properties.

Case 3

You want to place one element over another. Static elements does not take effect of z-index that's why you need to set it's position to relative, static or fixed

There may be other use cases

.a {
  background-color: #ddd;
  
  left: 50px;
  top: 150px;
  position: relative;
  
  width: 200px;
  height: 200px;
  text-align: center;
}
.absolute,
.a div {
  
  position: absolute;
  left: 50px;
  top: 50px;
  
  width: 100%;
  height: 60px;
  background-color: rgba(250, 0, 0, .4);
}

<div class="a">
  HTML > relative
  <div>HTML > relative > absolute</div>
</div>

<div class="absolute">HTML > absolute</div>

.a {
  position: relative;
  left: -20px;
}
.b {
  margin-left: -20px;
}
.wrapper {
  border-bottom: 2px solid #454545;
}

<div class="wrapper">
  relative moving content
  <br/>
  <span>some content to overlap</span>
  <span class="relative a">some content</span>
  <span>some content</span>
</div>

<div class="wrapper">
  using margins
  <br/>
  <span>some content to overlap</span>
  <span class="relative b">some content</span>
  <span>some content</span>
</div>

case 2 can also be done by using margins right and it will be still in dom flow right without using position relative?? — Hacker, May 09 '16 at 08:41
@Hacker Relative moving element will not effect surrounding elements (will keep it's occupied space in place) white negative margins will effect surrounding elements too. — Justinas, May 09 '16 at 08:51

When to exactly use position relative

1 Answers1