position:absoluteで相対的に定位置を確保した

Question

例えば下記の様なコードで#login-wrapperをウィンドウのリサイズをしても、常に#headerの右端に#login-wrapperの右端が揃う様にcssを設定したいと考えております。

ただ、実際に下記のコードを実行して、ウィンドウをリサイズすると#headerとの関係とは切り離され、常に動いてしまうと思います。それがposition:absoluteというものだとも思います。

参考にteratailのトップページのユーザーログインのための要素#boxUserMenuをみるとabsoluteが設定されているにも関わらず、ウィンドウリサイズに対して、必ず#headerから相対的に一定の位置を保ってくれています。少し表現が正しくないかもしれないのですが、どんなウィンドウサイズでも、#headerからみて同じ位置で#boxUserMenuが表示されていると思います。

なぜ、同じabsoluteを設定しているのに、違いがわからず、どの様に実装すれば良いかわからず、アドバイスを頂ければ幸いです。

<div id="wrapper">
 <div id="header">header</div>
 <div id="login-wrapper">login-wrapper</div>
</div>

#wrapper{
  width:600px;
}
#header{
  background:gray;
}
#login-wrapper{
  width:100px;
  height:100px;
  background:pink;
  position:absolute;
  right:0;
}

JSFiddle

Answer 1

position:absoluteはデフォルトでは、ページの左上が起点となりそこからの距離で配置されます。

直近の祖先要素に、position:relative か position:fixed を指定してある要素があれば、その要素の左上を起点として配置されます。

ということで、親要素である#wrapper に position:relative を設定すれば、
#wrapperの左上 = #header の左上が起点になります。

#wrapper{
  width:600px;
  position: relative;
}

Comments

[pegy]

コメントありがとうございます。
１日悩んだことが解決することができました。hatena19様のteratailに深い感謝でございます。
重ねて御礼申し上げます。

[pegy]

自身から例としてteratailのトップページについて触れたため、念のため直近の祖先要素（#boxUserMenu）のpositionを確認したのですが、特に設定がなかったため、違うものが影響して実装ができているのかと思います。developer toolで諸々cssをつけ外ししてみて違いを勉強してみようと思います。JSで制御している場合にはちょっと調べ方がわからないのでお手上げですが・・・

[hatena19]

> 自身から例としてteratailのトップページについて触れたため

どの部分のことかよく分かりませんが、ヘッダー部分のことなら、
.L-header__inner に position: relative; が設定されているので、それが起点になっていると思われます。

[pegy]

失礼しました、直近というのは親要素だけではなく、それより上も含んで直近という意味なのですが。誤解をしておりました。ありがとうございます！