親要素の表示領域内でabsoluteな配置

親要素の表示領域内でabsoluteな配置

普通にposition: absoluteを使うと画面内での絶対座標に配置されてしまう。

だが、親要素のpositionにstatic以外を指定することで、親要素の表示領域内での絶対座標に配置することができる。

.parent {
  position: relative;

  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.child {
  position: absolute;
  right: 0px;
  top: 0px;
}

static以外だとpositionにはabsoltute, relative, fixedが指定可能だけれども、
ここではtop等を指定しなければstaticとなんら変わらないrelativeを親要素.parentに指定している。
absoluteとfixedを指定した場合には絶対座標に配置されてしまうためである。