【コーディング初心者向け】positionの使い方

今回は「position」の使い方に関しまして、ご説明致します。
「position」には色々な種類があります。
どのように分けて使用するかを説明致します。

positionには色々ない種類があります。

「position：static;」　初期値
「position：relative;」　基準点となる位置
「position：absolute;」配置したい位置への動かす
「position：fixed;」指定した場所に固定で配置されます

実際に使用します。

基準点「relative」を使用して、「absolute」を設定します。

サンプル

絶対値で表示

表示サンプル

「絶対値で表示」がボックの中で配置されたと思います。

「position：fixed」を使用します

「fixed」を設定してみます。

左ボタン

「fixed」表示サンプル

左側にもじが表示されます。
fixedの場合は、「position:relative」の基準点は関係がなくなります

positionの使い方