CSSで要素を浮かせる方法【現役エンジニアが解説】
今回は、CSSで要素を浮かせる方法について、並べる場合と独立させる場合に分け、簡単に解説していきます。
浮かせて並べる場合
要素を浮かせて左右に並べる場合には、floatプロパティを使います。
floatプロパティでは、値がleftであれば左、rightであれば右に並べられます。
.hoge{ float:right; }
上記のコードでは、hogeというクラスを持つ要素を浮かせたうえで、右側に寄せて配置しています。
浮かせて独立させる場合
要素を浮かせて独立して配置させるには、positionプロパティを使用します。
positionプロパティの値をabsoluteにし、topプロパティやleftプロパティ等で座標を指定します。
.hoge{ position:absolute; /* 親要素にstatic以外のpositionの値を指定する必要あり */ top:10px; left:10px; }
上記のコードでは、hogeというクラスを持つ要素を独立させ、上から10ピクセル、左から10ピクセルの位置に配置しています。
重なりの順序を指定する場合
要素同士が重なる場合、重なりの順序をz-indexプロパティで指定することができます。
z-indexプロパティでは、値を数値で指定し、この値が大きい数値の要素ほど、前面に表示されます。
.hoge{ z-index:99; }
上記のコードでは、hogeというクラスを持つ要素が他の要素と重なった場合に、99よりも小さい要素に対して前面に表示させています。