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

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

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

  • 広告主様募集中
    格安で広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

先日対応した案件で、ページトップへのボタンをブラウザの幅に関係なく親要素から○○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 で
スポンサードリンク

関連記事

コメントを残す

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