WEB制作

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

2021年6月22日

me
悩んでいる人

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

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

IMG 5924
よし

こんにちは、よし(@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

NFT

2022/4/8

【OpenSea】Polygon(ポリゴン)NFTは売れない?デメリットはある?

no image

NFT

2022/4/16

OpenSeaで予約販売(List)する方法【自動で出品】

no image

NFT

2022/4/5

売れないNFTアートと売れたNFTアートを徹底比較【実体験】

no image

NFT

2022/3/3

【超簡単】OpenSeaのアイテムをコレクション移動させる方法【販売後も可能】

no image

NFT

2022/2/5

写真のNFT化・販売方法について徹底解説!

no image

NFT

2022/2/2

OpenSeaが突然の出品制限【50作品×5コレクションが上限に?】

no image

NFT

2022/1/26

【簡単】OpenSeaのアカウントを複数作る方法

no image

WEB制作

2022/4/3

テックアカデミー「はじめての副業コース」のLiteプランがヤバすぎる!

no image

仮想通貨 NFT

2022/1/5

【簡単】コインチェックで仮想通貨を購入・MetaMaskに送金する手順

no image

NFT 仮想通貨

2022/1/5

【2022年】メタマスクの使い方・送金方法を徹底解説【初心者でも簡単】

no image

仮想通貨

2022/1/24

【実体験】仮想通貨初心者にコインチェックがおすすめな理由

no image

仮想通貨

2022/1/24

【2022年】コインチェックの口座開設方法を5段階で解説

no image

NFT

2022/1/6

【バズるコツも紹介】NFTギブアウェイ(Giveaway)のやり方とメリット・デメリットを解説

no image

仮想通貨

2022/1/6

Hi Dollars(ハイダラーズ)アプリのマイニングで仮想通貨を貰おう【無料でゲット】

no image

NFT

2021/12/30

NFTエアドロップの受け取り方・送り方を解説【初心者でも簡単】

no image

NFT

2021/12/26

NFTアートが売れないときの対処法と稼ぐコツ【今すぐできる】

no image

NFT

2022/1/5

OpenSeaでのNFTアートの作り方【出品手数料やガス代も解説】

no image

WEB制作 プログラミング

2021/12/21

分割払いできる?デイトラの支払い方法を解説!【結論:カード使えば分割可能】

no image

プログラミング

2021/12/7

【退会料はかかる?】レバテックルーキーの退会方法【他のIT就活サービスも紹介】

no image

WEB制作

2021/12/5

デジタルハリウッドSTUDIO by LIG(Webデザイナー専攻)の学習内容と評判【2021年最新】

-WEB制作

© 2022 よしブログ Powered by AFFINGER5