WEB制作

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

2021年6月22日

me
悩んでいる人

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

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

cropped secondfavicon 1
よし

こんにちは、よし(@yoshi120208)です。

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

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

この記事で分かる事

・position:absolute(relative,fixed);を解除する方法

大学生がプログラミングを学ぶメリットとは?
大学生がプログラミングを学ぶメリットとは?

続きを見る

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制作に関する情報を発信しているので、ぜひ今日があればチェックしてみてください!

チェック!
未経験の大学生がweb制作で案件を取れた方法
【独学】大学生がweb制作で稼げるようになったロードマップ

続きを見る

それではまた!

no image

大学生

2021/10/18

【暇な大学生におすすめ】暇な時間を有効活用できる方法

悪質な情報商材に騙されないポイントと怪しいと思った時の対処法【実体験】

WEB制作 ブログ運営 プログラミング

2021/10/16

悪質な情報商材に騙されないポイントと怪しいと思った時の対処法【実体験】

211007アートボード 1 のコピー 42

ブログ運営

2021/10/7

【特化ブログ運営4ヶ月目】アクセス微増、収益4桁達成!!

【テックアカデミー】PHP/Laravelコースで身に付くスキル、評価は?

プログラミング

2021/9/30

【テックアカデミー】PHP/Laravelコースで身に付くスキル、評価は?

【特化ブログ運営3ヶ月目】ちょっとサボっちゃったけど収益とアクセスは?

ブログ運営

2021/9/5

【特化ブログ運営3ヶ月目】ちょっとサボっちゃったけど収益とアクセスは?

【web制作挫折防止】クラウドソーシング案件で消耗しない為のポイント

WEB制作

2021/9/30

【web制作挫折防止】クラウドソーシング案件で消耗しない為のポイント

簡単なサムネ、バナーの作り方!

WEB制作 ブログ運営

2021/8/19

【簡単】短時間でサムネ、バナーを作る手順!

no image

WEB制作

2021/8/18

webデザイナーはコーディングできないといけない??

no image

WEB制作

2021/8/19

【web制作は大変?】実際に経験した感想を語る

no image

WEB制作

2021/10/8

webデザイナーは絵が下手でもなれる?!

no image

WEB制作

2021/8/15

web制作案件に必要なスキルセット【初心者必見】

【文系もOK】レバテックルーキーの評判、口コミと使ってみた感想

プログラミング

2021/10/16

【文系もOK】レバテックルーキーの評判と使ってみた感想

【Udemy】web制作が学べるおすすめ講座  

WEB制作

2021/10/14

【Udemy】web制作が学べるおすすめ講座  

5149301 s

ブログ運営

2021/8/20

【特化ブログ運営2ヶ月目】アクセス数と収益は先月から変わった??

fv e1622358020615

ブログ運営

2021/8/13

ブログのコンタクトフォームの必要性と実装方法

【Local By Flywheel】WordPressのローカル環境構築手順

WEB制作 wordpress

2021/8/23

Local By FlywheelでWordPressローカル環境を構築する方法

undraw warning cyit

プログラミング

2021/8/23

プログラミングスクール卒業生が「使えない」と言われる理由と解決策

WordPressの子テーマのメリットデメリット

wordpress

2021/10/12

【WordPress】子テーマの作成方法とメリットを解説

undraw researching 22gp

プログラミング

2021/10/12

文系大学生が新卒でエンジニア就職する方法

【安い】大学生に本気でおすすめのwebデザインスクール4選!

WEB制作

2021/9/29

大学生におすすめのwebデザインスクール4選【安い】

-WEB制作

© 2021 よしブログ Powered by AFFINGER5