投稿日:2017年4月30日CSSのpositionプロパティについて解説します。positionプロパティと値で指定するのは要素を配置する為の位置とその要素が動くか固定されるかです。positionプロパティ値で設定した要素は親要素の中でtop、bottom、left、right等で位置を設定します。他要素や文字やpadding等の大きさの影響を受けて位置が動いてしまいます。position:relative;は相対位置です。static;は初期値ですが、設定すれば相対位置になります。position:relative;}絶対位置は基本的に他の要素や文字などからは影響を受けませんがスクロールすると他の要素と同じく画面上部に消えていきます。position:absolute;は絶対位置です。position:absolute;}固定絶対位置は画面に対して設定した位置で固定されスクロールの影響もうけません。position:fixed;は固定された絶対位置です。staticは初期値でtop、bottom、left、rightは適用されません。基本はbodyや親要素の上0左0の位置ですが、相対位置で他要素や文字やpadding等の影響受けます。親要素に設定するとその子要素にabsoluteが設定できません。static;には適用されないので、left:0の位置にあります。static;は文字の影響を受けてその下の位置にあります。初期値のstaticと違ってtop、bottom、left、rightの位置が設定できます。親要素の他要素や文字やpadding等の影響受けます。relativeは親要素の文字等の大きさの影響を受けるので、topは「親要素」の文字の下から20pxの位置です。.relativeのボックスはleft:20pxという設定なのでそのまま親要素の外に20pxはみ出しています。relativeは要素のレイアウトを維持する機能があります。20px;を設定すると、要素のレイアウトを維持したまま移動させるので、横幅width:100%で位置移動します。要素の外にスペースを作るCSSにmarginがありますが、これを設定するとはみ出すことなく、要素の横幅が縮んで親要素内に収まります。親要素position:relative/margin-left:20pxabsolute絶対位置。absoluteを設定した要素の親要素にはstatic以外のpositionプロパティと値が必要になります。それがなければbodyが親要素になります。absoluteを設定した要素はmargin等で位置の調整をすることができます。borderの影響を受けるので、細かい位置を決めたい時はborder幅の考慮が必要です。absoluteを設定した要素の親要素内の文字やpaddingの大きさには位置影響を受けません。設定した要素はスクロールで動きます。親要素にrelativeを設定して、子要素にabsoluteを設定するのがよく使われています。relative;を設定しています。この設定がなければ親要素がbodyになってページ(画面ではなく)の一番上から上20px左20pxの位置になります。absolute;は親要素の文字等の影響を受けないので、サンプルのレイアウトとしては窮屈ですが、親要素の上20px左20pxの位置にあります。対しての固定された絶対位置です。CSSでtop:150px;light:20px;に設定するとスクロールしても画面のその位置から動きません。position:fixedのサンプル親要素position:fixedここにマウスを置くと画面に対してtop:150pxとleft:20pxの位置に.fixedの要素が現れます。注意マウスを置くと現れるというのはjQueryで設定していて、position:fixedの動作ではありません。position:fixedは要素の位置を設定するだけのCSSで、他要素をマウスホバーして現れたり消えたりするものではありません。position:fixedを設定するとページを開いて最上部からずっと画面上に表示されてしまい、このページが読みにくくなってしまうので便宜上設定したものです。class="fixed">position:fixed</div></div>HTMLでは.fixedの要素は親要素の中に記述されていますが、CSSにposition:fixedを設定すると画面に対してtop:150pxとleft:20pxの位置に表示されます。20px;}position:stickystickyを指定した要素が指定した位置に来たらfixedのように範囲限定で絶対固定されます。絶対固定される範囲は指定した要素が含まれている親要素の終わりまでです。親要素の範囲内で位置が固定されるという事です。sticky;をサンプルとして設定してみました。InternetExplorerやEdgeはこの記事を制作した時はまだ未対応なので、サンプル動作を確認する事は出来ないと思います。スクロールしていって、h2タイトルの「position:sticky」が画面の上から100pxのところに来たら固定され、このコーナーを「div」に入れて、その終わりの「/div」のところで固定が解除されます。コメントをキャンセルコメントを投稿するにはログインしてください。