ブロック一つの
position:relative;
の場合

--- --- ---
 div

no-position

--- --- ---
 div.rela1

position:relative
left:--;
top:--;

--- --- ---
 div.rela2

position:relative
top:0;
left:0;

--- --- --- ---

position in 親子関係

--- --- --- ---
 Parent(div.rela1)
 --- Child(div.abso--)

background:rgba(0,0,0,0.4);
--- --- ---
 Parent/span>
 --- Child

position:absolute;
top:--;
left:--;

--- --- ---
parent
-child

position:absolute;
top:0;
left:--;
--- --- ---
parent
-child

position:absolute;
top:0;
left:0;
--- --- ---

position in 親子関係 --- absoluteの位置 - %指定-

--- --- --- --- --- --- ---
parent(div-.rela1)

position:relative

-child(div.abso11)

position:absolute;
top:100%;
left:100%;
--- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
parent(div-.rela1)
-child(div.abso11)

position:absolute;
top:100%;
right:100%;
--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
parent(div-.rela1)
-child(div.abso11)

position:absolute;
bottom:100%;
left:100%;
--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
parent(div-.rela1)
-child(div.abso11)

position:absolute;
bottom:100%;
right:100%;
--- --- --- --- --- --- --- ---