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で背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

no image

cssの書き方をまとめました「よく使う内容を網羅」

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

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

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

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

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

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

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

no image

wordpressのテーマのcssを編集する方法。3分でマスターできます。

どうも、チャーさんです。 あなたはwordpressのテーマのcssを編集したいですか?   この記事では、あなたの好きなように、 wordpressのcssを編集する方法を説明してます。 …

最新記事

チャーさん

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

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

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