レスポンシブの場合のabsoluteでのズレ

Question

わからないこと

ベースのwidth：750px
レスポンシブサイトでabsoluteのtopでCSSを指定した際にディベロッパーモードで確認した時とブラウザのウィンドゥを縮めて確認した時に微妙にズレが発生する

ざっくりと下記のような組み方をしています。
vwの計算方法は実際には下記の計算をしています。

デザイン上の長さ/750*100

<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">

<div class="container">
<p class="bg_a">AAAAA</p>
<p class="bg_b">BBBBB</p>
<p class="bg_c">CCCCC</p> 
<p class="ab">購入する</p>
</div>

.container{
  width: 100%;
  position: relative;
}
.bg_a{
  padding:3vw 0;
  background: #000000;
}
.bg_b{
    padding:10vw 0;
    background: pink;
}
.bg_c{
  padding:10vw 0;
  background: green;
}
.ab{
  position: absolute;
  top:10vw;
  background: blue;
  width: 100%;
  color:#ffffff;
  padding:2vw 0;
}

topの計算方法はvwのみで指定しています。

ディベロッパーモードで確認した時

ブラウザのウィンドゥを縮めて確認したとき

おそらくスクロールバー分がずれているのではないかという推測なのですがこれをずれないようにするにはvwだけではできないのでしょうか？
もしご存知の方がいらっしゃれば教えていただければ嬉しいです。

Comments

[m.ts10806]

現象が再現できるコードをご提示ください。

[Lhankor_Mhy]

『topの計算方法はvwのみで指定』 vh ではなくて、 vw で間違いないですか？

[kakeru99]

Lhankor_Mhyさん
＞＞VWで指定しています。

[Lhankor_Mhy]

ご存知のとおり、vw は横幅で、top の値は縦方向の値ですから、ずれるのは仕方がないのでは。

[kakeru99]

Lhankor_Mhyさん
＞＞通常はtopを指定する単位はvhということでしょうか？

[x_x]

画像のずれている「今すぐご購入はこちら」がコード上の.ab「購入する」なのでしょうか？
どの部分を指しているのかはっきりさせたほうがいいかと

[Lhankor_Mhy]

あ、単位を統一してあるんですね……
では、他に原因がありそうですね。

Answer 1

単位を統一していたんですが背景のsizeを100%にしていたのでずれていたようです。
ここも100vwにすることでズレが解決しました。

ありがとうございます。

Comments

[yoshinavi]

＞ここも100vwにすることでズレが解決しました。
→　そうですか？どこの部分でしょうか？

[kakeru99]

ここでは明記していない部分でした。
わかりずらくてすみません。
こちらのCSSの指定でいうとwidthも100%ではなく100vwのすればずれることはないようです。

[yoshinavi]

なるほど、提示されていない部分ですね。
「100％」「100vw」「auto」等、似て非なるモノで悩むことはありますね。
解決されて何よりです。
(^^)

[kakeru99]

色々とありがとうございます！
勉強になりました！

Answer 2

ズレる原因のひとつとして、ブラウザはデフォルト値をもっており、その中に固定値が入っているからだと思います。

margin、font-size等を、「0（ゼロ）」や、可変の単位にする必要がありますので、試してみてください。