ホーム(記事一覧)へ

CSS position(absolute・relative・fixed)を解除する方法

CSSのposition:absoluteは細かい位置移動や要素を重ねたり、上部固定などができます。

でも、スマホ版になったとき解除したいんだよなぁ、と思うことでしょう。

CSS position(absolute・relative・fixed)を解除する方法について説明します。

leftやtopの解除方法はこちら↓

positionの基本的な書き方はこちら↓

結論

position:staticで上書きする

解除方法1.position:staticで上書きする

position:staticはあなたの望み通り、positionを解除したいときに使います。

例えばposition:absoluteを使ってパソコン版で位置指定していた要素をスマホ版で解除するときに使えます。

またはposition:relativeを解除して、absoluteの基準位置をさらに親要素に変更するといったときにも使えます。

解除方法2.position:initialを使う

「initial」はデフォルトに戻すCSSの値です。解除にも使えます。

positionに限らず どのCSSプロパティにも使えますがIEでは使えません。

GoogleアナリティクスなどでIEの割合を確認し少ないようなら使うのもアリです。

現在IEの利用率は下がりつつあります。

ただ、どんなときでもpositionの初期値はstaticですので、position:staticでよいでしょう。

まとめ

position:staticを上書きで指定することでposition:absoluteやposition:relative、position:fixedを解除できる。

以上、CSS position(absolute・relative・fixed)を解除する方法でした。

関連記事