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