マンガでわかるホームページ作成

CSS positionを解除する方法

CSSのposition:absoluteは便利なもので細かい位置移動や上から覆いかぶせたり、上部固定などができます。

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

CSS positionを解除する方法について説明します。

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を解除できる。

以上、CSS positionを解除する方法でした。

関連記事