position:fixedで固定する位置を親要素基準にする方法

position:fixedで固定する位置を親要素基準にする方法

position:fixedで固定する位置を親要素基準にする方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • Amazonギフト券を安く買って、予算内で商品が探せるサイト。
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

要素を画面内に固定表示するために、「position:fixed」を使って位置を調整する場合、ブラウザのウインドウが基準となる座標となります。例えば、「position:fixed left:100px;」と指定した場合、ブラウザの左端から100pxの位置に要素が固定表示されます。

先日対応した案件で、ページトップへのボタンをブラウザの幅に関係なく親要素から○○px離れた位置に固定したい、という要望があったので、どのようにして実装したかを紹介したいと思います。

スポンサードリンク

position:fixedで固定する位置を親要素基準にする方法

まず、HTMLは以下のようにシンプルです。


<div class="pagetop-parent">
 <a href="#top" class="pagetop-child">ページトップへ</a>
</div>

親要素にもクラスを付与しておきます。

CSSでは、以下のように指定します。


.pagetop-parent {
 width:960px;
 margin:0 auto;
}
 
.pagetop-child {
 position:fixed;
 left:auto;
 top:0;
 margin:0 0 0 100px;
}

親要素に横幅を指定して”margin:0 auto;”で中央寄せにし、子要素のleftの値はautoにしてmarginで親要素からの距離を指定します。

これで、ブラウザのサイズに関係なく、親要素を基準に位置を指定できます。

あとがき

親要素を基準にした位置に固定表示したいという要望はあまりないかもしれませんが、親要素に横幅を指定してleft:auto;にすれば親要素にぴったり張りつく位置に表示されると覚えておくと、いざという時に役立つかと思います。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。