CSSでpositionプロパティの指定を解除する方法!

CSSでpositionプロパティの指定を解除する方法についてサンプルコード付きで解説します。PCではpositionをabsoluteやfixedしていたものを、スマホではpositionを解除したいといった時にこちら役立ちます。

コンテンツ [表示]

  1. 1CSSでpositionプロパティの指定を解除する方法
  2. 1.1position: staticを用いる
  3. 1.2position:initialを用いる
  4. 2まとめ

CSSでpositionプロパティの指定を解除する方法

CSSでpositionプロパティの指定を解除する方法を2つ項目を分けて解説します。

position: staticを用いる

positionabsolutefixedしていたものを解除するにはデフォルト値のposition: staticで上書きして打ち消します。

では実際にサンプルコードを用意したので確認してみましょう。

始めはposition: fixed;を指定していますが、後からposition: static;で上書きすることで、position: fixed;が解除されていることが分かります。

position:initialを用いる

positionabsolutefixedしていたものを解除するにはposition: initial;で上書きしてリセットします。

ではサンプルコードを用意したので確認してみましょう。

始めはposition: fixed;を指定していますが、後からposition: initial;で上書きすることで、position: fixed;が解除されていることが分かります。

ただしposition: initial;はIEでは使えないので注意してください。

まとめ

いかがでしたでしょうか?

ぜひここで紹介した方法を試してみてください。

GeekHive採用サイト

関連記事