- Products -


Software


NEWS


Special



- Knowledge -


Category × Tag



- Like -

公開
作成日:2022/7/15
更新日:2022/7/21

親要素を起点としたfixed配置のやり方

・普通に考えると、親のCSSで「position:relative」を指定し、子のCSSで「position:fixed」と「leftやtop」をいじれば実現できそうに思えるが、これだとうまくいかない。

・正解は、子の位置調整で「leftやtop」は使わず、「margin-left」など「margin」で指定するというもの。

使い方



<style>
.parent_el{
  position: relative;
  margin-top: 30px; /* 検証のため */
  margin-left: 30px; /* 検証のため */
}

.child_el{
  position: fixed;
  margin-top: 10px;
  margin-left: 10px;
}
</style>

<div class="parent_el">親
  <div class="child_el">子</div>
</div>


参考


https://web.runland.co.jp/blog_cate2/post-1839


Category



Tag




関連記事


{{tmp.name}}

{{article.category}} {{article.title}}