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

悩んでいる人

CSSで、potition:absolute(relative,fixed);を設定していて、スマホサイズの時は解除したいのですがやり方が分かりません！

その悩みよく聞きます！しかし、簡単に解決できるので解説します！

よし

こんにちは、よし（@yoshi120208）です。

ヘッダーメニューやお問い合わせボタンなど、positionを使う機会はよくあると思うのですが、レスポンシブの際に解除方法が分かりずらいですよね。

そこで、今回はCSSでposition設定をした際に解除する方法を解説します！

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

方法1

結論から言うと、

を上書きすることで、解除されます。

少し解説すると、positionの初期値はstaticで設定されているので、一度absoluteなどで上書きされたものをさらにstaticで上書きする事で、初期値に戻しています。

方法2

二つ目の方法は、

と記述する方法です。

Initialはcssのどのプロパティーにも使える、デフォルトに戻す記述です。

しかし、IEには使えないようなので、理由がない限り、方法1のpositio:static;で上書きすることをお勧めします。

まとめ

いかがでしたか？

position;absolute(fixed,relative);はstaticで上書きする事で解除できます。

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

普段はweb制作に関する情報を発信しているので、ぜひ今日があればチェックしてみてください！

それではまた！