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関係


スポンサードサーチ

関連記事

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

cssで背景画像を表示するコードと方法「コピペOK」

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

no image

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

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

no image

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

cssのレスポンシブの書き方「初心者向け記事」

どうも、チャーさんです。   あなたはcssのレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

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

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

no image

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

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

no image

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

no image

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

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

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

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

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

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

最新記事

チャーさん

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

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

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