<div class="page">
<main>
bottom
</main>
</div>.page{
position:absolute;
height:200px;
width:50px;
background:green;
}
main{
position:relative;
height:100px;
bottom:0;
background:red;
}
position: relative совместно со свойствами top, right, bottom или left смещает элемент относительно его естественного расположения на странице. Поэтому все работает так, как и должно. Ваш main естественным образом расположен в верхней части родителя и смещен на 0px. Ну то есть никуда не смещен.position: absolute.