absolute

HTMLの要素同士は通常重なって表示されることはありませんが、position: absolute;を使うと、要素同士を重ねて表示することが出来ます。

サイト全体の左上部分を基準とし、そこからの位置をtopとleftを用いて指定します。また、rightやbottomを併用することも可能です。

relative

position: absolute;の基準位置はサイト全体の左上部分ですが、この基準位置は変更することが出来ます。

基準としたい親要素にposition: relative;と指定すると、その要素の左上部分が基準位置となります。

要素の位置を変更する方法を学びましょう。

前回position: relative;はposition: absolute;の基準位置を決めるために使っていましたが、要素の位置を変更するためにも使うことが出来ます。

position: relative;をtopやleftと併用すると、その要素を本来の位置からずらせます。

fixed

position: fixed;を使うと、常に要素を画面上の指定した位置に固定させておくことができます。

位置は、top、left、right、bottomを使って指定します。