CSSのpositionプロパティを理解する

2020年12月12日CSS

positonプロパティをマスターすることで、好きな要素を好きな場所に配置したり、スクロールしても同じ位置に配置するような表示ができるようになります。

  • positionプロパティの使い方と具体例
  • 要素の絶対配置
  • z-indexの使い方

をみていきましょう。

positionプロパティで要素の位置を変えよう

positionプロパティで指定できる値は次の通りです。

  • static
  • relative
  • absolute
  • fixed

positionプロパティの初期値はstatic。
relativeは、top,left,right,bottomなどと合わせて使うことで、通常通りのstaticの位置からずらすことができます。

 position: relative;

 top: 30px;

 left: 30px;

なら、staticの位置から30pxずつ位置が変わります。

position: fixed;
 top: 30px;
 left: 30px;
 
fixedの場合は固定されます。

また、上の例だと左上から30pxずつのところが位置となります。スクロールしてもついてくる仕様になります。

またfixedにすると、要素が浮いた状態になり、その下のものは詰めて表示されます。

  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
  <div class="box3">Box 3</div>
  <div class="box3">Box 3</div>
  <div class="box3">Box 3</div>
  <div class="box3">Box 3</div>
  <div class="box3">Box 3</div>
  <div class="box3">Box 3</div>
  <div class="box3">Box 3</div>
  <div class="box3">Box 3</div>
  <div class="box3">Box 3</div>
  <div class="box3">Box 3</div>
  <div class="box3">Box 3</div>
  <div class="box3">Box 3</div>
  <div class="box3">Box 3</div>
.box1 {
  background-color: orange;
  width: 100px;
  height: 100px;
}

.box2 {
  background-color: skyblue;
  width: 100px;
  height: 100px;
  /* position: static; */
  /* position: relative; */
  position: fixed;
  top: 30px;
  left: 30px;
}

.box3 {
  background-color: tomato;
  width: 100px;
  height: 100px;
}

要素の絶対配置

position:absoluteにすることで要素を絶対配置することができます。

このposition:absoluteは子要素に適用します。
親要素がstaticかそれ以外かで挙動が変化するのもポイントです。

親要素がstaticの場合 
親要素がstaticの場合、左上から30pxずつとなります。

親要素をrelativeの場合
親要素をrelativeにすると、親要素の左上を基準として30pxずつの位置に配置されます。

右上にちょこんとラベルを載せたいというときは、
position: absolute;を指定した子要素の数値のtopとrightをマイナス数値をいれてあげることで実現できます。

  top: -5px;

  right: -5px;
  <div class="box1">Box 1</div>
  <div class="box2">
    <!-- Box 2 -->
    <div class="rect"></div>
  </div>
  <div class="box3">Box 3</div>
  <div class="box3">Box 3</div>
.box1 {
  background-color: orange;
  width: 100px;
  height: 100px;
}

.box2 {
  background-color: skyblue;
  width: 100px;
  height: 100px;
  /* position: static; */
  position: relative;
}

.box3 {
  background-color: tomato;
  width: 100px;
  height: 100px;
}

.rect {
  width: 50px;
  height: 20px;
  background-color: lime;
  position: absolute;
  /* top: 30px;
  left: 10px; */
  top: -5px;
  right: -5px;
}

z-indexで重なり順を操作する

z-indexは、要素の重ね合わせを制御できます。

何も書かなければ、あとに書いた要素が上にきます。

z-indexを利用することで、値を大きいものを上にもってくることができる。
まずは簡単にこの触り部分だけ知っておくといいでしょう。

CSS

Posted by devsakaso