flex-and-position-sample

body-div
margin:10px;
padding:10px;

body-div-div1
margin:10px;
padding:10px;

body-div-div2(relative)
margin:10px;
padding:10px;
position:relative;
top:-50px; left:50px;

body-div-div2-div1
margin:10px;
padding:10px;

body-div-div2-div2(relative)
margin:10px;
padding:10px;
position:relative;
top:-50px; left:50px;

body-div-div2-div3(absolute)
margin:10px;
padding:10px;
position:absolute;
top:20px; right:20px;

body-div-div3(absolute)
margin:10px;
padding:10px;
position:absolute;
bottom:10px; right:10px;

body-div-div3-div1
margin:10px;
padding:10px;

body-div-div3-div2(relative)
margin:10px;
padding:10px;
position:relative;
top:-50px; left:50px;

body-div-div3-div3(absolute)
margin:10px;
padding:10px;
position:absolute;
top:20px; right:20px;

body-div-div4(flex root)
margin:10px;
padding:10px;
display:flex;

body-div-div4-div1
margin:10px;
padding:10px;

body-div-div4-div2(relative)
margin:10px;
padding:10px;
position:relative;
top:-50px; left:50px;

body-div-div4-div3(absolute)
margin:10px;
padding:10px;
position:absolute;
top:20px; right:20px;

body-div-div4-div4
margin:10px;
padding:10px;

body-div-div5
margin:10px;
padding:10px;

body-div-div6
margin:10px;
padding:10px;

要約
・flex内のabsolute要素はflexから除外される
・relativeやabsoluteは、positionがstatic以外の直近の祖先の要素を起点にする
・absoluteのbottomは、positionがstatic以外の直近の祖先の要素が存在しない場合、スクロールyが0の時のViewportを基準にする
・absoluteのbottomは、positionがstatic以外の直近の祖先の要素が存在する場合、その要素の包括ブロックを基準にする
・absoluteのtopは、body要素にposition:relative;を指定したものが基準になる場合、body直下の要素のmarginの影響を受ける