Почему bottom:0 не работает?

Question

[gifon]

Привет

<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;
}

почему bottom:0 не работает
как это исправить
https://jsfiddle.net/hvpzk3gj/6/

Answer 1

[Ivan Bogachev]

Использование position: relative совместно со свойствами top, right, bottom или left смещает элемент относительно его естественного расположения на странице. Поэтому все работает так, как и должно. Ваш main естественным образом расположен в верхней части родителя и смещен на 0px. Ну то есть никуда не смещен.

Вероятно вы получите нужное вам поведение если будете использовать position: absolute.