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

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

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

no image

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

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

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

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

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

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

no image

cssの書き方class編(初学者向け)

どうも、チャーさんです。 この記事では、cssの書き方を書いています。   具体的にはclass、classを複数使う方法、 idについてとcss書き方についての内容なので、 この記事を読め …

no image

cssで見出しに画像を表示させる方法「簡単にできる」

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

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

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

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

cssでテーブルの行間を広げる方法

  あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いてるので、読め …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

最新記事

チャーさん

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

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

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