「position:fixed」は親要素と子要素どちらかのみ使用する

Yukimi Sato 871views 更新:2015年6月3日

パッと見の見た目は完璧でも、スマホですくロールした際に一瞬ちょっと下に下がってしまうという表示バグが発生したのでメモ。

HTML

<div class="wrapper">
 <div class="body">
  <h1>タイトル</h1>
 </div>
</div>

CSS

.wrapper{
position:relative;
}
.body{
position:fixed;
bottom:0;
left:0;
width:100%;
}
h1{
position:fixed;
top:0;
left:0;
width:100%;
}

こんな感じで親はbottom、子はtopと指定していると子の方がリロードやスクロールした際に動いてしまいます。
解決方法は親子関係から並列にしてあげることだけになります。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません