Categories: HTML&CSS

【CSS3】positionの使い方

以下のHTMLを使った場合にCSSで子要素を位置を決める書き方をサンプルコードとともに紹介します。

HTML

<div class="oya">
  <div class="ko">
  </div>
</div>

子要素を親要素の左上に表示する

左上にするための大事なポイント
  • 親要素には「position:relative」を設定する。
  • 子要素には「position:absolute」を設定し、以下を設定する。
    • 「top:0px」
    • 「left:0px」

See the Pen
position-hidariue
by shiakisudev (@shiakisu)
on CodePen.

CSS

.oya {
  width: 200px;
  height: 200px;
  background: skyblue;
  position: relative;
}
.ko {
  width: 50px;
  height: 50px;
  background: pink;
  position: absolute;
  top:0px;
  left:0px;
}

子要素を親要素の右上に表示する

右上にするための大事なポイント
  • 親要素には「position:relative」を設定する。
  • 子要素には「position:absolute」を設定し、以下を設定する。
    • 「top:0px」
    • 「right:0px」

See the Pen
ExKNMox
by shiakisudev (@shiakisu)
on CodePen.

CSS

.oya {
  width: 200px;
  height: 200px;
  background: skyblue;
  position: relative;
}
.ko {
  width: 50px;
  height: 50px;
  background: pink;
  position: absolute;
  top:0px;
  right:0px;
}

子要素を親要素の左下に表示する

左下にするための大事なポイント
  • 親要素には「position:relative」を設定する。
  • 子要素には「position:absolute」を設定し、以下をを設定する。
    • 「bottom:0px」
    • 「left:0px」

See the Pen
position-hidarisita
by shiakisudev (@shiakisu)
on CodePen.

CSS

.oya {
  width: 200px;
  height: 200px;
  background: skyblue;
  position: relative;
}
.ko {
  width: 50px;
  height: 50px;
  background: pink;
  position: absolute;
  bottom:0px;
  left:0px;
}

子要素を親要素の右下に表示する

右下にするための大事なポイント
  • 親要素には「position:relative」を設定する。
  • 子要素には「position:absolute」を設定し、以下をを設定する。
    • 「bottom:0px」
    • 「right:0px」

See the Pen
position-migisita
by shiakisudev (@shiakisu)
on CodePen.

CSS

.oya {
  width: 200px;
  height: 200px;
  background: skyblue;
  position: relative;
}
.ko {
  width: 50px;
  height: 50px;
  background: pink;
  position: absolute;
  bottom:0px;
  right:0px;
}

子要素を親要素の上下中央揃えに表示する

上下中央揃えにするための大事なポイント
  • 親要素には「position:relative」を設定する。
  • 子要素には「position:absolute」を設定し、以下をを設定する。
    • 「margin:auto」
    • 「top:0px」
    • 「bottom:0px」

See the Pen
position-jogecenter
by shiakisudev (@shiakisu)
on CodePen.

CSS

.oya {
  width: 200px;
  height: 200px;
  background: skyblue;
  position: relative;
}
.ko {
  width: 50px;
  height: 50px;
  background: pink;
  position: absolute;
  margin :auto;
  top:0px;
  bottom:0px;
}

子要素を親要素の上下右中央揃えに表示する

上下右中央揃えにするための大事なポイント
  • 親要素には「position:relative」を設定する。
  • 子要素には「position:absolute」を設定し、以下をを設定する。
    • 「margin:auto」
    • 「top:0px」
    • 「bottom:0px」
    • 「right:0px」

See the Pen
joge-migi-center
by shiakisudev (@shiakisu)
on CodePen.

CSS

.oya {
  width: 200px;
  height: 200px;
  background: skyblue;
  position: relative;
}
.ko {
  width: 50px;
  height: 50px;
  background: pink;
  position: absolute;
  margin :auto;
  top:0px;
  bottom:0px;
  right:0px;
}

子要素を親要素の左右中央揃えに表示する

左右中央揃えにするための大事なポイント
  • 親要素には「position:relative」を設定する。
  • 子要素には「position:absolute」を設定し、以下をを設定する。
    • 「margin:auto」
    • 「left:0px」
    • 「right:0px」

See the Pen
position-sayuucenter
by shiakisudev (@shiakisu)
on CodePen.

CSS

.oya {
  width: 200px;
  height: 200px;
  background: skyblue;
  position: relative;
}
.ko {
  width: 50px;
  height: 50px;
  background: pink;
  position: absolute;
  margin :auto;
  left:0px;
  right:0px;
}

子要素を親要素の左右下中央揃えに表示する

左右下中央揃えにするための大事なポイント
  • 親要素には「position:relative」を設定する。
  • 子要素には「position:absolute」を設定し、を設定する。
    • 「margin:auto」
    • 「left:0px」
    • 「right:0px」
    • 「bottom:0px」

See the Pen
sayu-sita-center
by shiakisudev (@shiakisu)
on CodePen.

CSS

.oya {
  width: 200px;
  height: 200px;
  background: skyblue;
  position: relative;
}
.ko {
  width: 50px;
  height: 50px;
  background: pink;
  position: absolute;
  margin :auto;
  left:0px;
  right:0px;
  bottom:0px;
}

子要素を親要素の上下左右中央揃えに表示する

上下左右中央揃えにするための大事なポイント
  • 親要素には「position:relative」を設定する。
  • 子要素には「position:absolute」を設定し、を設定する。
    • 「margin:auto」
    • 「top:0px」
    • 「bottom:0px」
    • 「left:0px」
    • 「right:0px」

See the Pen
position-center
by shiakisudev (@shiakisu)
on CodePen.

CSS

.oya {
  width: 200px;
  height: 200px;
  background: skyblue;
  position: relative;
}
.ko {
  width: 50px;
  height: 50px;
  background: pink;
  position: absolute;
  margin :auto;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
}

子要素を親要素の任意の位置に表示する

任意の位置にするための大事なポイント

基本は「top」と「left」のみ使い、上からどのくらい離れているか、左からどのくらい離れているかを意識すると良いです。

以下は上から20px分、左から50px分動かした例です。

See the Pen
position-nini
by shiakisudev (@shiakisu)
on CodePen.

CSS

.oya {
  width: 200px;
  height: 200px;
  background: skyblue;
  position: relative;
}
.ko {
  width: 50px;
  height: 50px;
  background: pink;
  position: absolute;
  margin :auto;
  top:20px;
  left:50px;
}

以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp