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

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

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

no image

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

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

no image

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

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

no image

cssで画像を丸くする方法「15秒以内にできます」

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

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

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

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

no image

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

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

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

no image

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

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

no image

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

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

no image

cssで書いたボタンをhover時にへこむようにする方法です。

どうも、チャーさんです。   あなたはcssを使って作ったボタンを、 hover(マウスをボタンの上に持って来ること) 時にへこむようにしたいですか?   この記事を読めば、あなた …

no image

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

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

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

no image

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

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

最新記事

チャーさん

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

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

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