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 親を基準に要素を配置する