Enjoy IT Life

【CSS】relative/absoluteの作成方法

HTML/CSS

方法1: 親要素をrelative、子要素をabsoluteにする

親要素のpositionにrelative、子要素のpositionにabsoluteを指定する方法です。

具体的な作成手順は以下の通りです。

  1. 移動対象の要素（子要素）に『position: absolute』を適用
  2. 移動基準の要素（親要素）に『position: relative』を適用
  3. 子要素（absolute）で位置を指定

この方法を利用することで、子要素の位置を親要素を基準とした絶対値で指定できます。具体例は以下の通りです。

<div class="item">
  <div class="item__badge"></div>
</div>

.item {
  width: 200px;
  height: 200px;
  background-color: lightskyblue;
  position: relative;
}

.item__badge {
  width: 100px;
  height: 25px;
  background: lightgreen;
  position: absolute;
  top: 0;
  left: 0;
}

See the Pen relative-absolute-badge by Toshiharu Nishina (@nishina555) on CodePen.

方法2: 要素をrelative、擬似要素before/afterをabsoluteにする

具体的な作成手順は以下の通りです。

  1. 要素に『position: relative』を適用
  2. 要素の擬似要素before(あるいはafter)に『position: absolute』を適用
  3. 擬似要素で位置を指定

この方法を利用することで、擬似要素の位置を要素を基準とした絶対値で指定できます。具体例は以下の通りです。

<div class="item">

.item {
  width: 200px;
  height: 200px;
  background-color: lightskyblue;
  position: relative;
}

.item::after {
  content: '';
  width: 100px;
  height: 25px;
  background: lightgreen;
  position: absolute;
  top: 0;
  left: 0;
}

See the Pen relative-absolute-badge by Toshiharu Nishina (@nishina555) on CodePen.

なお、擬似要素before/afterの詳細解説は[擬似要素before/afterの概要と具体例](/pseudo-before-after-overview/)で紹介しています。

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

タグ: css