Edit in JSFiddle

<b>Absolute Positioning:</b>
<p>#6 is positioned absolutely 150px from left but relative (w.r.t.) to #5.</p>
<div id="id5" class="decorate relative">5
    <span>I am relative</span>
    <div class="decorate absolute">6 </div>
    <div class="decorate static">7 </div>
</div>

.static {
    position : static;
}
.relative {
    position : relative;
    left : 150px;
}
.fixed {
    position : fixed;
    right : 0;
    top : 0;
    height : 105px !important;
}
.absolute {
    position : absolute;
    left : 150px;
    top : 35px;
    width : 300px !important;
}
.decorate {
    width:150px;
    height:35px;
    background-color : black;
    color : white;
    text-align : left;
    font-size:30px;
    text-indent:10px;
}
.relative::after {

    color : orange;
    font-size:20px;
}
.static::after {
    content:"I am static";
    color : orange;
    font-size:20px;
}
span{
    color : orange;
    font-size:20px;
}
.fixed::after {
    content:"I am fixed ...... I'll not move even if you scroll.";
    color : orange;
    font-size:20px;
}
.absolute::after {
    content:"I am absolute (but relative to 5)";
    color : orange;
    font-size:20px;
}