CSS position relative 要素を元の位置からずらす

positionのrelativeは、要素を元の位置からずらして配置します。

目次 positionのrelative
元の位置を基準として要素を配置する(relative)

positionのrelative

書き方 position : 値
relative
元の位置を基準として要素をずらして配置する。
relativeは、相対的という意味。
positionプロパティの値は他にstatic,fixed,absolute,stickyがあります。
初期値 static
継承 なし
参考(MDN) https://developer.mozilla.org/ja/docs/Web/CSS/position

元の位置を基準として要素を配置する(relative)

<style>
  .box1 {
    width: 150px;
    height: 30px;
    border: 1px solid #000;
    background-color: #c4cece;
  }
  .box2 {
    position: relative;
    top: 10px;
    left: 20px;
    width: 150px;
    height: 30px;
    border: 1px solid #000;
    background-color: #e0ffff;
  }
</style>
<div class="box1">box1</div>
<div class="box2">box2</div>

9行目は、position:relateiveです。元の位置が基準になります。
10行目は、topで元の位置から下に10pxずれます。
11行目は、leftで元の位置から右に20pxずれます。

topとleftの代わりにbottomとrightの指定もできます。
マイナスの数値の指定もできます。

relativeがない場合

上記コードの9~11行目がない場合は以下になります。

関連の記事

CSS 回り込みと解除のサンプル(floatとclear)
CSS position absolute 親を基準に要素を配置する

△上に戻る