全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
CSS positionを配置した親要素を起点にfixedさせる
2018.09.03
※この記事は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の値を増やすとコンテンツから離れた形になります。
状況によって、調整をしてみてください。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
この記事を読んだ方はこんな記事も読んでいます
こんにちは。コーダーの兼山です。 コーディング時にtableで表を組み込む際、レスポンシブコーディングなどでのスマートフ…
こんにちは。コーダーの兼山です。 背景固定を『background-attachment: fixed;』で指定した際、…
