ヘッダーやページトップに戻るボタン、モーダルウインドウなど画面の特定の位置に固定したいのに位置がずれる・position:fixed;が効いていないとなることはありませんか？
そんな場合の原因と対応方法について詳しく解説していきます。
positionプロパティについて
CSSのpositionプロパティは指定した要素の配置方法(基準位置)を指定できるプロパティです。
よく使用されるのでご存知の方も多いとは思いますが、使用方法や各値については以下のようになります。
positionプロパティの使用方法
.box {
position: fixed;
}上記のように、positionプロパティに各値を設定するだけになります。
各値については下記に記載しますが、static以外の値ではtop・bottom・left・rightなどのプロパティも合わせて記述する事で位置の指定も可能です。
使用できる値について
positionプロパティで使用出来る値には以下のものがあります。
static
初期値になります。通常の文書のフローと同じ扱いです。
relative
本来配置される場所を基準にして相対的に位置を指定できます。
absoluteを指定した要素の親要素・先祖要素であればrelativeを指定した要素が基準となり配置されます。
absolute
static以外の値が指定された親要素・先祖要素を基準としての絶対配置となります。基準がない場合はhtml要素が基準位置となります。
sticky
通常の文書と同じ配置になりますが、指定した位置までスクロールすると、その位置に要素が固定されます。
static以外の値が指定された親要素・先祖要素を基準としての相対配置となります。
fixed
ブラウザの表示領域(画面内)を基準とした絶対配置になります。
スクロールしても画面内から動かず固定配置となります。
position:fixed;が効かない、基準位置がずれる場合
前項で解説したように、position:fixed;はブラウザの表示領域(画面内)を基準とした絶対配置となり、画面内に固定で表示されます。top:0;、left:0;を追加で指定した場合は画面の左上に固定表示になりますが、ある一定の条件下では指定した位置からずれてしまう場合があります。
position:fixed;が効かない、基準位置がずれる原因と対処方法
以下のような状態だとfixedを指定した要素の位置がずれてしまいます。
<div class="box">
<div class="fixed_content">固定したいコンテンツ</div>
</div>.box {
transform: translate(50px);
}
.fixed_content {
position: fixed;
top: 0;
left: 0;
}上記のように、親要素・先祖要素にtransformプロパティ(全値)が指定されていると、基準位置がその要素となり位置がずれてしまいます。
この基準位置がずれるのをCSSハックとして上手く利用している方も多いとは思いますが、これにはもっといいやり方がありますので後日詳しく解説していきます。
さいごに
いかがでしたでしょうか。
今回は、position:fixed;が効かない・基準位置がずれる場合の原因と対応方法について解説しました。
fixedはよく考えて設計しないと、こういった不具合にあう場合もあります。また、ブラウザによっても若干挙動が違う場合やPC・SP時の違いもありますので注意してください。
