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

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の書き方class編(初学者向け)

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

no image

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

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

no image

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

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

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

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

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

no image

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

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

no image

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

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

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

最新記事

チャーさん

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

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

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