Enjoy IT Life

『position: absolute』を適用した要素の表示特性まとめ

HTML/CSS

【CSS】ブロック/インライン/インラインブロックの違いについてで紹介したように、HTMLタグにはデフォルトの表示形式が存在します。

しかし、position: absoluteを適用することで表示の特性が変化します。今回はposition: absoluteを適用した要素の特性について紹介します。

インライン要素同士は横並び、ブロックレベルの要素の場合は縦並び

position: absoluteを適用しても要素の並び方の特性に変化はありません。

インライン要素同士であれば横並びになり、ブロックレベルの要素の場合は縦並びになります。

<span class="inline">inline</span><span class='absolute'>inline absolute</span>

.inline {
  background: lightskyblue;
}

.absolute {
  background: lightgreen;
  position: absolute;
}

See the Pen inline-absolute-lines by Toshiharu Nishina (@nishina555) on CodePen.

<div class="block">block</div>
<div class='absolute'>absolute block</div>

.block {
  background: lightskyblue;
}

.absolute {
  background: lightgreen;
  position: absolute;
}

See the Pen block-absolute-lines by Toshiharu Nishina (@nishina555) on CodePen.

横幅と高さの指定ができる

position: absoluteを適用させる要素がインライン要素であろうとブロックレベル要素であろうと、ブロックレベル要素の特性と同じく横幅と高さの指定ができます。

<span class='inline'>inline</span>
<span class='absolute'>absolute inline</span>

.inline {
  background: lightskyblue;
  width: 150px; /* 効かない */
  height: 120px; /* 効かない */
}

.absolute {
  width: 150px;
  height: 150px;
  background: lightgreen;
  position: absolute;
}

See the Pen inline-absolute-size by Toshiharu Nishina (@nishina555) on CodePen.

デフォルトのサイズは要素内のコンテンツが収まる大きさ

position: absoluteを適用させる要素がインライン要素であろうとブロックレベル要素であろうと、インライン要素の特性と同じくデフォルトのサイズは要素内のコンテンツが収まる大きさです。

<div class='block'>block</div>
<div class='absolute'>absolute block</div>

.block {
  background: lightskyblue;
}

.absolute {
  background: lightgreen;
  position: absolute;
}

See the Pen block-absolute-default-size by Toshiharu Nishina (@nishina555) on CodePen.

『margin: 0 auto』や『text-align: center』による中央寄せはできない

インライン要素やブロックレベル要素の中央よせのテクニックはposition: absoluteを適用させた要素では効きません。

<div class="parent">
  <span class='absolute'>inline absolute</span>
<div>

.parent {
  width: 200px;
  height: 200px;
  text-align: center; /* 子要素自身ではなく、子要素の始点が親要素の中央に配置される */
  background: lightskyblue;
}

.absolute {
  background: lightgreen;
  position: absolute;
}

See the Pen inline-absolute-text-align by Toshiharu Nishina (@nishina555) on CodePen.

<div class='block'>block</div>
<div class='absolute'>absolute block</div>

.block {
  width: 150px;
  margin: 0 auto;
  background: lightskyblue;
}

.absolute {
  width: 150px;
  background: lightgreen;
  margin: 0 auto;
  position: absolute;
}

See the Pen block-absolute-margin-auto by Toshiharu Nishina (@nishina555) on CodePen.

`position: absolute`を適用させた要素を中央よせの詳細は[absoluteとrelativeを利用した上下左右の中央よせ方法](/relative-absolute-center/)で紹介しています。

さいごに

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

タグ: css