Web blog WEBブログ

CSS positionを配置した親要素を起点にfixedさせる

2018.09.03

こんにちは。コーダーの兼山です。

今回は、CSS positionを配置した親要素を起点にfixedさせる方法をご紹介します。

「トップへ戻る」ボタンを指定する際、
普通にfixedを指定すると、ページ全体を基準に絶対位置で位置が固定されます。

それを、メインコンテンツを基準にfixedを指定したい場合、
今回の方法が役に立ちます。

メインコンテンツ(親要素)を基準にfixedを指定したい場合

親要素にrelative又はabsoluteを指定します。

「position: fixed ;」で指定した要素にはleft値を指定しない。

これで親要素を基準とした位置固定ができるようになります。

パターン1:ページトップをコンテンツの右に配置【デモ】

ページトップのアンカーに、

float:right;
margin-right:-100px;

上記の記述をします。
margin-rightの「-100px」は、ページトップのアンカーの幅のサイズです。

パターン2:ページトップをコンテンツの左に配置【デモ】

ページトップのアンカーに、

margin-left:-100px;

上記の記述をします。
margin-leftの「-100px」は、ページトップのアンカーの幅のサイズです。

パターン1の右に寄せる場合と違い、floatでの指定は不要です。

まとめ

今回の方法のポイントは、
・position:fixed;を指定した要素内で、marginを利用して調整をとる
・メインコンテンツの幅が固定サイズの場合に利用できる
これらの点が挙げられます。

今回のデモでは、ページトップボタンがメインコンテンツにピッタリくっついている形ですが、marginの値を増やすとコンテンツから離れた形になります。

状況によって、調整をしてみてください。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

無料相談窓口