positionの『static』『absolute』『relative』でハマっていた。

cssでpositionの設定を行っていた。
しかし、思う通りにページが表示してくれなかった。
『思う通り』！＝『書いた通り』という状況に陥っていて、
完全にハマっていた。

でも、ググって以下ページの解説記事を読んだら、解決した。
CSS : positionの「absolute」「relative」「fixed」のリファレンス | CSS Lecture
MIYAさん、ありがとうございます。

未来にハマる可能性が高いと思うので、
今回、学習したことをアウトプットしておく。

基本

static	配置を指定できない。使う必要はないかも。
relative	相対位置。本来、表示される位置を基準として位置を指定できる。
absolute	絶対位置。親ボックスかウィンドウの左上を基準として位置を指定できる。
fixed	absoluteと同様。ただ、画面をスクロールしても位置が固定。

で、今回、ハマった部分に関連するんだけど。大事なのはabsoluteの使い方。

absoluteのポイント

positionをabsoluteと指定する要素の親要素のpositionの指定が
static以外の値が設定されている場合、基準は親ボックスの左上となり、
staticが設定されている場合、基準はウィンドウ全体の左上となるということ。

これが、分かってなくてハマりました。