Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

css cssのposition関係

positionのabsoluteを解除する簡単な方法

投稿日:2019年11月22日 更新日:

Pocket

うも、チャーさんです。

あなたはposition:absoluteを解除したい、

そう思っていませんか?

 

この記事では、position absoluteを解除する方法を、

書いています。

 

なのであなたがこの記事を読めば、

即座にposition absoluteを解除することが

できます。

 

ということで、position absoluteを解除したいなら、

このまま下にスクロールし読んでみてください。

 

スポンサードサーチ

position absoluteを解除するには

 

でまず結論からです。

position absoluteを解除する方法は、

position:staticを使うことです。

 

というのもposition:staticとは、

元々の状態に戻すという意味で、

つまりpositionを指定していない状態になるのです。

 

なので例えば、div要素などなら

普通にdivと書いた時のような状態に戻りますし、

他の要素でも同様です。

 

 

まぁつまりはposition:staticと書くことで、

position:absoluteを解除できるのです。

 

 

position:staticの使い道

 

一応関連することなので書きますが、

positon absoluteの解除としてのstaticの使い道としては、

レスポンシブなどで使うことがあります。

 

例えばpcサイズの画面では、

absoluteを使ってデザインの都合で、

強引な位置に画像を表示させても、

 

スマホサイズではそもそも画像を表示する

スペースすらなくなることがあり、

absoluteのままだとデザインが崩れることが多々です。

 

 

ですが、そんな時には、

position:absoluteが指定されてる要素に、

ブレークポイントでposition:staticを指定し、

 

position:absoluteを解除してやることで、

ブロック要素なら、普通に高さを持って、

縦に並んでくれますし、

 

インライン要素なら横並びになってくれます。

 

 

このようにposition:staticを使えば、

absoluteを解除することができるので、

解除したい場合はやってみましょう。

 

スポンサードサーチ

まとめ

 

ということでまとめに入ります。

 

position:absoluteを解除する方法ですが、

position:staticと書きましょう。

 

 

そうするとabsoluteがかかっていた要素は、

absoluteが解除された状態になり、

 

高さも出て通常のブロック要素やインライン要素などの、

状態に戻ります。

 

ということで、position absoluteの解除方法は

わかったと思いますので、早速あなたの方でも

実践してみましょう。

 

 

まずはabsoluteを解除したい要素を

見極めて、そしてその要素に対して、

position:staticと書きましょう。

 

するとabsoluteが解除されます。

 

 

でここで1つ注意ですが、

absoluteが解除されることで当然

その要素は元のあるべき位置に表示されます。

 

それによってデザインや見た目が変わるので、

そこを考慮に入れた上でやりましょう。

 

ということでpositionのabsoluteを解除する方法でした。

 

 

それでは、読んでもらってありがとうございました。

 

チャーさん

-css, cssのposition関係

スポンサードサーチ

関連記事

no image

cssで追随させる方法、スクロールしてもついてくるよ

  どうも、チャーさんです。   あなたは、cssでサイドバーなどを、 追随させる方法を知りたいと思っていませんか?     この記事では、スクロールしても、 …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

no image

z-indexが効かない場合の解決法(relativeつけたのに効かない場合)

   どうもチャーさんです。   あなたはz-indexが効かないと困っていませんか? ちゃんとrelativeもつけてるのに、 なぜ効かないんだと悩んでいませんか?   この記事 …

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

cssで画像を丸くする方法「15秒以内にできます」

どうも、チャーさんです。   あなたはcssで画像を丸くしたい、 そう思っていませんか?   この記事では、cssで画像を丸くする方法を、 書いています。   &nbsp …

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。