position: relative;とposition: absolute;は、HTML要素の位置を調整するために使用されますが、その使い方には違いがあります。
- position: relative;
position: relative;は、要素の位置を相対的に移動するために使用されます。このプロパティを設定すると、top、bottom、left、rightプロパティを使って要素を移動できます。 ただし、要素を移動した場合、その要素が原本に占めていたスペースは詰まったままである。
- position: absolute;
position: absolute;は、要素を絶対的な位置に配置するために使用されます。このプロパティを設定した要素は、親要素からの相対的な位置に配置されます。 要素を移動した場合、その要素が原本に占めていたスペースは取り除かれる。
両プロパティには、要素の配置やレイアウトを調整するために有用ですが、違いは上記に書きました。 要素を相対的に移動したい場合はrelative、絶対的な位置に配置したい場合はabsoluteを使うことになります。