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

要素をposition:fixed;で固定表示する際は、通常はブラウザを基準に配置することが多いと思います。

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

まず、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;にすれば親要素にぴったり張りつく位置に表示されると覚えておくと、いざという時に役立つかと思います。