positionの使い方

CSS

あいまいにしていたことを、明確にしていきます！

参照元

CSSのpositionを総まとめ！absoluteやfixedの使い方は？

positionの使い方

positionは基準の位置に対してどの位置に配置するのかを決める。 基準の位置は、設定値によって変わる。

positionの設定値

値は４種類ある。
static / relative / absolute / fixed

１つ目：static

デフォルト値。（未指定の場合はstatic） top / bottom / left / right を指定しても配置は変わらない。

２つ目：relative

何も指定していない時の位置（top / left / right / bottomを未指定の時の位置）を基準にして配置する。

<div class="sample">
</div>

.sample {
  position: relative;  /* 元々の位置を基準とする */
  top: 100px;  /*元々の位置（top:100px を未指定の時の位置）を基準に上から100pxずらす*/
}

３つ目：absolute

親要素を基準にして配置する。
親要素は、positionに relative か fixed が指定してある既出の要素。

<div class="parent">
  <div class="child">
  </div>
</div>

.parent {
  position: relative;  /* 親要素の目印 */
}
.child {
  position: absolute; /*親要素を基準の位置とする*/
  /*親要素上から10px、左から10pxずらす*/
  top: 10px;  
  left: 10px;
}

４つ目：fixed

ウィンドウ全体（表示画面）を基準にして配置する。

positionの使いどころ

見出しのアイコン

タイトルの要素を基準として、before / after 要素を作って装飾する。

<article class="article">
  <h3 class="article__title">タイトル</h3>
  <p>文章</p>
</article>

.article__title {
  position: relative;
  padding-left: 24px;
}
.article__title::before {
  content: "";
  display: block;
  position: absolute;
  width: 10px;
  height: 20px;
  top: 0px;
  left: 0px;
  background-color: #999;
}
.article__title::after {
  content: "";
  display: block;
  position: absolute;
  width: 10px;
  height: 20px;
  bottom: 0px;
  left: 0px;
  background-color: #333;
}