固定幅の親要素を持つ要素を画面の端に配置したい

Question

固定幅の親要素を持つ要素をどんなブラウザ幅でも画面の端に配置したいです。

例えば

<div class="hoge">
    <div class="hogehoge"></div>
</div>

.hoge{
  width: 1000px;
  height: 200px;
  position: relative;
  background: red;
  margin: 0 auto;
}
.hogehoge{
  width: 200px;
  height: 200px;
  position: absolute;
  right: 0;
  background: blue;
}

というコードだとして、
このままではhogehogeは親要素（hoge）の右端に配置されますが
これをどんなデバイスでも画面の右端（大きなブラウザの場合は親要素よりも外）に配置する方法はありますでしょうか。

ご教授いただけますと幸いです。

Answer 1

calc と 100vw を使ってrightの値を計算すればどうでしょうか。

.hoge{
  width: 1000px;
  height: 200px;
  position: relative;
  background: red;
  margin: 0 auto;
}
.hogehoge{
  width: 200px;
  height: 200px;
  position: absolute;
  right: calc((1000px - 100vw)/2);
  background: blue;
}

動作確認用サンプル
位置を確認しやすいように border設定を追加してます。

Comments

[pan_x]

ご回答いただきましてありがとうございます。

試してみたのですが、
right: calc((1000px - 100vw)/2); だと画面幅によっては
若干画面幅より外に設置されるようです。

こちら理由はおわかりになりますでしょうか？
ご教授いただければ幸いです。

[hatena19]

当方のchrome上のcodepenでのテストではきっちり表示されます。
動作確認用サンプルのリンクを追加しましたのでご確認ください。

他の部分の設定に問題があると思われます。

[pan_x]

ご丁寧に追記いただきましてありがとうございます。

codepen確認させていただきました。
仰る通りテストページは問題なく表示されていますので
他の設定に問題がありそうですね。
その他の設定を見直したあと実装してみます。

非常に助かりました。ありがとうございました。

Answer 2

.hogehogeのrightをマイナスwidthにすれば
親要素の外側(右端)に設定できます。

.hogehoge {
    right: -200px;
}

Comments

[pan_x]

ご回答いただきましてありがとうございます。