CSSのpositionプロパティと値absoluteとrelativeとfixedとstaticと追加stickyの解説

CSSのpositionプロパティについて解説します。
positionプロパティと値で指定するのは要素を配置する為の位置とその要素が動くか固定されるかです。
positionプロパティ値で設定した要素は親要素の中でtop、bottom、left、right等で位置を設定します。

相対位置と絶対位置と固定絶対位置

相対位置は他要素や文字やpadding等の大きさの影響を受けて位置が動いてしまいます。
position:relative;は相対位置です。position: static;は初期値ですが、設定すれば相対位置になります。

絶対位置は基本的に他の要素や文字などからは影響を受けませんがスクロールすると他の要素と同じく画面上部に消えていきます。
position:absolute;は絶対位置です。

固定絶対位置は画面に対して設定した位置で固定されスクロールの影響もうけません
position:fixed;は固定された絶対位置です。

static

初期値・相対位置
staticは初期値でtop、bottom、left、rightは適用されません
基本はbodyや親要素の上0左0の位置ですが、相対位置で他要素や文字やpadding等の影響受けます。
また親要素に設定するとその子要素にabsoluteが設定できません

position:staticのサンプル

親要素

position:static

.statictop: 20px;とleft: 20px;を設定していますが、position: static;には適用されないので、left:0の位置にあります。
topは、position: static;は文字の影響を受けてその下の位置にあります。

relative

相対位置
相対位置で、初期値のstaticと違ってtop、bottom、left、rightの位置が設定できます
親要素の他要素や文字やpadding等の影響受けます

position:relativeのサンプル

親要素

position:relative

.relativeにtop: 20px;とleft: 20px;を設定しているので基本は親要素の左上0から左20px上20pxとなるのですが、position: relativeは親要素の文字等の大きさの影響を受けるので、topは「親要素」の文字の下から20pxの位置です。

.relativeのボックスはleft:20pxという設定なのでそのまま親要素の外に20pxはみ出しています。

relativeは要素のレイアウトを維持する機能があります。
relativeでtop: 20px;とleft: 20px;を設定すると、要素のレイアウトを維持したまま移動させるので、横幅width:100%で位置移動します。
要素の外にスペースを作るCSSにmarginがありますが、これを設定するとはみ出すことなく、要素の横幅が縮んで親要素内に収まります。

親要素

position:relative/margin-left:20px

absolute

絶対位置
absoluteを設定した要素の親要素にはstatic以外のpositionプロパティと値が必要になります。
それがなければbodyが親要素になります。

absoluteを設定した要素はmargin等で位置の調整をすることができます。
borderの影響を受けるので、細かい位置を決めたい時はborder幅の考慮が必要です。
absoluteを設定した要素の親要素内の文字やpaddingの大きさには位置影響を受けません

設定した要素はスクロールで動きます

親要素にrelativeを設定して、子要素にabsoluteを設定するのがよく使われています。

position:absoluteのサンプル

親要素position:relative

position:absolute

親要素にposition: relative;を設定しています。
この設定がなければ親要素がbodyになってページ(画面ではなく)の一番上から上20px左20pxの位置になります。

position: absolute;親要素の文字等の影響を受けないので、サンプルのレイアウトとしては窮屈ですが、親要素の上20px左20pxの位置にあります。

fixed

絶対位置・固定
画面に対しての固定された絶対位置です。
例えばCSSでtop:150px;light:20px;に設定するとスクロールしても画面のその位置から動きません

position:fixedのサンプル

親要素

position:fixed

ここにマウスを置くと画面に対してtop:150pxとleft:20pxの位置に.fixedの要素が現れます。

注意
マウスを置くと現れるというのはjQueryで設定していて、position:fixedの動作ではありません
position:fixedは要素の位置を設定するだけのCSSで、他要素をマウスホバーして現れたり消えたりするものではありません。
position:fixedを設定するとページを開いて最上部からずっと画面上に表示されてしまい、このページが読みにくくなってしまうので便宜上設定したものです。

HTMLでは.fixedの要素は親要素の中に記述されていますが、CSSにposition:fixedを設定すると画面に対してtop:150pxとleft:20pxの位置に表示されます。

position:sticky

stickyを指定した要素が指定した位置に来たらfixedのように範囲限定で絶対固定されます。
絶対固定される範囲は指定した要素が含まれている親要素の終わりまでです。
親要素の範囲内で位置が固定されるという事です。

サンプル

このページのこの「position:sticky」の解説部分にposition: sticky;をサンプルとして設定してみました。
InternetExplorerやEdgeはこの記事を制作した時はまだ未対応なので、サンプル動作を確認する事は出来ないと思います。

スクロールしていって、h2タイトルの「position:sticky」が画面の上から100pxのところに来たら固定され、このコーナーを「div」に入れて、その終わりの「/div」のところで固定が解除されます。

関連情報

現在関連情報はありません。
カテゴリーCSS

コメントを残す