カテゴリー
CSS position(right)

【CSS】position(right):ボックスの配置方法を指定する

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

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(right):ボックスの配置方法を指定する

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

  • static
    配置位置を指定しない(初期値)
  • relative
    相対位置
  • absolute
    絶対位置(スクロールすると動く)
  • fixed
    絶対位置(スクロールしても固定位置)
  • top
    上位置から指定
  • left
    左位置から指定
  • right
    右位置から指定
  • bottom
    下位置から指定