(例)【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
下位置から指定