css - When to exactly use position relative -

i not expert in css. did not give position , have css like

#myid{     margin-left: 10px;     margin-top: 10px; }  #myid{     position: relative;     left: 10px;     top: 10px; } 

both did wanted. when should use relative position exactly. advantage or disadvantage on other?

case 1

you have inner element positioned absolute , want element stick it's parent. apply position: relative parent element. default absolute element pops out dom flow , takes position closest relative element (html default)

case 2

you want move element still keep in dom flow. apply position: relative , move left/right/top/bottom properties.

case 3

you want place 1 element on another. static elements not take effect of z-index that's why need set it's position relative, static or fixed

there may 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 overlap</span>    <span class="relative a">some content</span>    <span>some content</span>  </div>    <div class="wrapper">    using margins    <br/>    <span>some content overlap</span>    <span class="relative b">some content</span>    <span>some content</span>  </div>