html - css - position 位置指定

 
1. 概要
2. 実験

1. 概要

 ボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する際に使用するそうで  以下のように指定します。

position: static;	←	指定なし
position: relative;	←	相対位置の指定
position: absolute;	←	絶対位置の指定
position: fixed;	←	絶対位置でスクロールしても固定

2. 実験


<div style="position: static; border: 2px solid red;">①position: static;</div>
<div style="position: relative; border: 2px solid red;">②position: relative;</div>
<div style="position: absolute; border: 2px solid red;">③position: absolute;</div>
<div style="position: fixed; border: 2px solid red; bottom: 2em;">④position: fixed;</div>
①position: static;
②position: relative;
③position: absolute;
④position: fixed;

 「④position: fixed;」は、画面を縦スクロールしても同じ位置にいるはずです。