css cssのposition関係

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

投稿日:2019年4月28日 更新日:

Pocket

 

うも、チャーさんです。

 

あなたはabsoluteとrelativeの違いがわからず、

困っていませんか?

 

またそのせいで、思ったように

ページ制作に活用できず困っていませんか?

 

 

この記事では、absoluteとrelativeの違いについて、

お話しします。

 

なのでこの記事を読めば、

あなたはabsoluteとrelativeの違いが、

はっきりわかるようになります。

 

そしてページ制作で困らなくなるでしょう。

 

 

なので、あなたがabsoluteとrelativeの違いがわからず、

困っている場合、このまま下にスクロールして、

読んでみてください。

 

スポンサードサーチ

absoluteとrelativeの違いは?

 

で早速結論です。

 

absoluteとrelativeの違いは、

起点の違いです。

 

起点とは、positionプロパティのtopやleftをつけた時に、

どこからtop何ピクセル分、left何ピクセル分の

開始点になる部分のことです。

 

 

とはいえ、absoluteとrelativeは、

文字の説明だけだと理解が難しいので、

具体例を画像でおみせします。

 

*動画も撮ったので、あなたが

動画でみた方が理解しやすいタイプの場合は、

動画の視聴をどうぞ。

 

 

文章の方が理解しやすいというタイプの場合は、

下の文章をどうぞ。

 

absoluteの場合

 

まずはabsoluteからいきましょう。

 

absoluteは、何も考えずに普通に要素に指定すると、

画面の一番左上が起点になります。

 

 

そしてそこを開始点(起点)として、

topやleftで指定したピクセル分だけ移動します。

 

以下の画像のように。

 

 

上記の画像では、青色ボックスに、

position:absoluteをつけています。

 

ということで、起点が画面の一番左上

になっています。

 

 

そしてそこから、topとleftに、

100px分ずつ動かしてるので、

画像のような配置になっているのです。

 

ということから、absoluteは、

単純に起点が一番左上になると言うことです。

 

relativeの場合

 

では、relativeはどうでしょうか?

relativeの場合は、本来表示される場所を起点にする。

という仕組みになっています。

 

相対位置とか言われますが、

わかりにくいと思いますので、

こちらも例を出します。

 

まずは以下の画像をみてください。

こちらは普通にボックスを並べてます。

 

 

で、この緑のボックスの位置をよく覚えててください。

 

で、こちらの緑ボックスにrelativeをつけ、

topやleftを指定しますと、、

 

 

はい、このように緑色のボックスが、

もともとあった場所を起点(開始点)にして、

top,left100px分移動してますね。

 

で、ここで違いがはっきりしたと、

思うのですが、absoluteの場合は、

画面の一番左上からみて、topとleft分移動しました。

 

で、今回のrelativeの場合は、

もともと緑色ボックスがあった場所から、

topとleft分動きました。

 

 

このようにabsoluteとrelativeの違いは、

起点の違いになります。

 

そしてどこからtopやleftでどんだけ分、

動かすか?という違いなのです。

 

 

で、これらの違いが、最初はpositionで、

ややこしく感じたり、うまくpositionを

操れない原因なのです。

 

ですが、挙動と仕組みさえ知っていれば、

意図した動かし方ができるので、

上記の違いを理解して使ってみてください。

 

スポンサードサーチ

absoluteにはもう1つ知らないと困る機能があります

 

で、ここまでが、absoluteとrelativeの、

大きな違いになります。

 

で、ここからはabsoluteについて、

もう1つ知っておいた方がいい挙動について、

話します。

 

 

それはabsoluteには、

relativeがついてる親要素を起点にする。

 

という機能があります。

文章だとよくわからなくなると思うので、

また画像で説明します。

 

例えば以下の画像をみてください。

 

 

この画像では、

緑色のボックスを親要素とし、

その中に紫のボックスを子要素としていれてます。

 

で緑色(親)にはrelativeがついており、

紫(子)にはabsoluteがついてます。

 

さらに、紫にはtopやleftで75px分動かしてます。

 

 

でこのabsolute、セオリー通りだと、

画面の一番左上を起点にしてるはずですよね。

 

ですが、このrelativeがついた親要素の、

子要素にabsoluteがついた場合、

親要素の一番左上が起点になるのです。

 

今回の画像でいうと、緑色のボックスの、

一番左上を起点にしてそこから75ピクセル分、

動いてるわけです。

 

 

(上にまたスクロールするのは、

手間だと思うのでもう一度同じ画像貼ります。)

 

 

とこのように、absoluteは、

単体でつけるか、relativeがついてる親要素の、

中にある子要素にabsoluteつけるかで、

 

挙動が変わります。

 

これも知らないとページ制作や、

cssでデザインする際に思い通りに動かず、

困った!となるので、ぜひとも知っておいてください。

 

スポンサードサーチ

absoluteとrelativeをうまく使いこなす方法

 

absoluteを思い通りに操るには、

absoluteをつける要素の親となってる要素に、

relativeがついてるか?

 

それを常に確認しましょう。

 

 

またrelativeをつける場合は、

absoluteがついてる要素とかを気にしながら、

設定しましょう。

 

コーディングの際、relativeをつける要素の前に、

書いた要素にabsoluteをつけて、

relativeを下の要素につけたりすると、

 

relativeの起点となる元の位置自体が変わってしまうので、

デザインが崩れます。

 

 

なので、relativeをつける際は、

上記のことに留意しながらrelativeつけましょう。

 

スポンサードサーチ

まとめ

 

それではまとめに入ります。

 

absoluteとrelativeの違いは、

起点の違いになります。

 

 

absoluteは基本画面の一番左上、

relativeつきの親要素の中の子要素につける場合は、

親要素の一番左上が起点になります。

 

relativeはもともと表示されてる位置が起点。

画面の一番左上ではないこと。

 

これが違いですね。

 

 

最初は非常にわかりにくく、

理解しないまま使うとデザインが崩れまくって、

ひー!っと発狂しそうになるほどです。

 

なので、この記事で紹介しました、

absoluteとrelativeの違いを理解した上で、

cssやページ制作で役に立ててください。

 

 

では早速ですが、

あなた自身でも試してみましょう。

 

まずは色付きボックスを3つ用意しましょう。

ボックスは書くの手間だと思うので、

下にコードを用意しました。

 

 

でボックスを用意したら、

以下でお渡しするコードにある、

.box1にabsolueをつけてみてください。

 

そしてtopやleftを指定してみましょう。

 

 

で、次にabsoluteが済んだら、

.box1のabsoluteをけして、

.box2にposition:relative;をつけてtopなど指定してみましょう。

 

色付きボックスは以下のコードを、

コピペすればすぐ出ますので、

どうぞ使ってください。

 

<html>

<head>

<style>

.box {

    width:200px;

    height:200px;

  }

  .box1 {

    background:blue;

  }

  .box2 {

    background:limegreen;

  }

  .box3 {

    background:gray;

  }

</style>

</head>

<body>

<div class=”box1 box”>

  </div>

  <div class=”box2 box”>

  </div>

  <div class=”box3 box”>

  </div>

</body> 

</html>

 

上記のことをやれば、

体感的にabsoluteとrelativeの違いが、

わかると思います。

 

 

すると、あなたのコーディングスキルが、

アップしますので、是非ともやってみてください。

 

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

 

チャーさん

 

-css, cssのposition関係


スポンサードサーチ

関連記事

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

no image

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

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

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

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

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

no image

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

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

cssの書き方でフォントサイズについて知りたいならこの記事

どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …

no image

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

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

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

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

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

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

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

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

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

最新記事

チャーさん

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

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

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