【CSS】position：ボックスの配置方法を指定する

(例)【CSS】positionの使用方法

See the Pen
position by linlin (@linlin098765)
on CodePen.

<p class="sample">position:static<span class="sample1">static</span></p>
<p class="sample">position:relative<span class="sample2">relative</span></p>
<p class="sample">position:absolute<span class="sample3">absolute</span></p>
<p class="sample">position:fixed<span class="sample4">fixed</span></p> 

p.sample {height:50px; background-color:gray;position:relative }
span.sample1 {color:red; position:static; top:10px; left:10px }
span.sample2 {color:red; position:relative; top:10px; left:10px }
span.sample3 {color:red; position:absolute; top:10px; left:10px }
span.sample4 {color:red; position:fixed; top:10px; left:10px }

【CSS】position：ボックスの配置方法を指定する

　CSSのpositionは、ボックス要素の配置方法を絶対的または相対的に指定します。

• static
  配置位置を指定しない（初期値）
• relative
  相対位置
• absolute
  絶対位置（スクロールすると動く）
• fixed
  絶対位置（スクロールしても固定位置）

• top
  上位置から指定
• left
  左位置から指定
• right
  右位置から指定
• bottom
  下位置から指定