Чем позиционирование relative отличается absolute в CSS

Механизм позиционирования позволяет задать точную позицию элемента. Если элемент позиционируется в режиме relative, то его размещение определяется относительно его нормального размещения в потоке макетирования страницы. Если элемент позиционируется в режиме absolute, то он размещается в конкретной позиции относительно ближайшего родителя. Иногда это вся страница — в этом случае, например, можно разместить в левом верхнем углу окна браузера. В нашем случае элементы черный квадрат позиционируется как relative относительно окна браузера, а красный квадрат как absolute относительно его "черного" родителя.

Если в стиле красного квадрата убрать position:absolute; то он переместится в верхний левый угол черного квадрата.

<style type="text/css">
div#main {
    position: relative;
    background-color: black;
    width: 400px;
    height: 300px;
    margin: auto;
}
div#test {
    position:absolute;
    background-color:red;
    width:100px;
    height:60px;
    bottom:0px;
    right:0px;
}
</style>
 
<div id="main">
    <div id="test"></div>
</div>