CSSポジショニング：
位置：相対（相対）/絶対（絶対）/静的（ポジショニングなし）/固定（固定）
ドキュメントフロー：上から下、左から右
相対ポジショニング：
相対：ポジショニング前の相対位置、効果は下図のようになります（元々は左上隅にあり、相対的な位置と上下の属性を設定した後、赤い四角が移動しました）
相対位置が設定されている場合、特定の左上の値は入力されないため、相対位置は一種のコンテナの親要素として存在できます。
<html>
<head>
<style type="text/css">
.main{
background-color: yellow;
}
.div1{
height: 100px;
width: 100px;
position: relative;
top: 10px;
left: 20px;
background-color: red;
}
</style>
</head>
<body>
<div class="main">