記述例 | 値 | 意味 |
---|---|---|
position:static; | static | この値のときには、top、bottom、left、rightは適用されません。初期値 |
position:relative; | relative | 相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。 |
position:absolute; | absolute | 絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。 |
position:fixed; | fixed | 絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。 |
top:0; left:5px; bottom:5%; right:auto; | 「auto」 「auto」初期値 「px,%,me」などの数値で指定 | positionプロパティを併用して、配置方法(基準位置)を設定 |
z-index:999; | 整数値で指定(数値が多きほど上) 「auto」初期値 | z-indexプロパティは、ボックスの重なりの順序を指定する際に使用します。 z-indexプロパティは、positionプロパティでstatic以外の値が指定されている要素に適用されます。 |
position:relative;
相対位置への配置
position:absolute;
絶対位置への配置
position:fixed;
固定位置への配置
position:relative;の中に
position:absolute;
相対位置の中で
絶対位置への配置
「position」を使うと幅「width」は初期値が無くなるが、
幅「width」と高さ「height」で%指定が使えるようになる