2021/01/08

CSSで要素を浮かせる方法【現役エンジニアが解説】

PROGRAM

今回は、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よりも小さい要素に対して前面に表示させています。

• facebook
• Tweet
• Read Later