【CSS】相対配置と絶対配置

相対配置とは？

相対配置とはある要素の本来の位置からの場所を指定する配置方法です。

    <div id = "number1"></div>
    <div id = "number2"></div>

#number1{
 background:red;
 height:200px;
 width: 200px;
}

#number2{
  background:yellow;
  height: 200px;
  width: 200px;
  position: relative;
  top:50px;
  left:50px;
}

本来あるべきボックスの位置から、top:50px、left:50px分ずれて表示されます。

絶対配置とは？

絶対配置はページの左上を起点とした位置を指定します。

#number1{
 background:red;
 height:100px;
 width: 200px;
}

#number2{
  background:yellow;
  height: 100px;
  width: 200px;
  position: absolute;
  top:50px;
  left:50px;
}

黄色のボックスはこのページの左上に行ってしまいました…。

重なる順序を指定する：z-index

z-indexの値が大きいほど、ブラウザ上では上に表示されます。

    <div id = "number1"></div>
    <div id = "number2"></div>
    <div id = "number3"></div>

#number1{
 background:red;
 height:100px;
 width: 200px;
}

#number2{
  background:yellow;
  height: 100px;
  width: 200px;
  position: relative;
  top:10px;
  left:10px;
  z-index:10;
}

#number3{
  background:blue;
  height: 100px;
  width: 200px;
  position: relative;
  top:20px;
  left:20px;
}