position:absoluteなのにセンター合わせができるのは何故？

質問

CSSです。
うまく表示されているのですが、何でうまくいっているのかわからないことがあります。

というのも、コンテンツをセンター合わせのレイアウトにしているというのにposition:absoluteのパーツがちゃんとセンター合わせがなぜかできてしまっているんです。

ユーザがブラウザの横幅を拡げようとも狭めようとも、常に左右をセンター合わせするつくりになっています。
以下が成功ソースです。
※下記のlinkboxは、headerというIDセレクタに包含されている。

div#linkbox {
position: absolute;
top:50px;
padding-left: 300px;
width: 500px;
_width: 800px;
}

div#header {
background: #333333;
text-align: left;
width:800px;
height:100px;
margin-left: auto;
margin-right: auto;
}

なぜこのソースでうまくいってしまうんでしょうか。
absoluteでも、左右を設定しない場合、自動で包含ブロック内に収まるとでもいうのでしょうか。

回答No.2

神崎 渉瑠（@taloo） · ベストアンサー

HTMLのほうは、

<div id="header">
<div id="linkbox">
</div>
</div>

という風になっていませんか？

div#linkboxにleftが指定されていないので、positionを指定しないときと同じ位置に表示されます。

div#headerのmargin-leftとmargin-rightでセンタリングされていますので、
div#linkboxもセンタリングされているように見えます。

おそらく
div#linkbox{ margin-top:50px }
のかわりとして、positionとtopを使用しているものと思います。

お礼

ありがとうございます！

------------------------------------------------------------
HTMLのほうは、

<div id="header">
<div id="linkbox">
</div>
</div>

という風になっていませんか？
------------------------------------------------------------

はい、そのとおりです。そうなっております。

------------------------------------------------------------
div#linkboxにleftが指定されていないので、positionを指定しないときと同じ位置に表示されます。
------------------------------------------------------------

なるほど、absoluteでleftを指定していないから、その状態ではabsoluteの位置が定まらず、しかしブラウザのプログラムとしてはどこかに落ち着かせなければならない。それならここだと。
もしくはそこまでブラウザ設計ではプログラムされておらず、されていない場合に一番流れていきそうな落ち着き場所にも思えます。
なんか納得できてきました。記述が無いのだから単にposition指定が無い場合と同じ処理になる。う～ん確かに。

------------------------------------------------------------
div#headerのmargin-leftとmargin-rightでセンタリングされていますので、
div#linkboxもセンタリングされているように見えます。
------------------------------------------------------------
そうですよね、センタリングがありますから同じくセンタリングされますよね。

------------------------------------------------------------
おそらく
div#linkbox{ margin-top:50px }
のかわりとして、positionとtopを使用しているものと思います。
------------------------------------------------------------

ええ、そうですね。positionを使いたいSEO的理由があるのでそうしていますが、それがなければおっしゃるような記述が候補です。

なんか納得できました。ありがとうございました。

回答No.1

grumpy_the_dwarf

もしかしてdiv{position:relative}とか指定してませんかね。

要は#headerが中央揃えになってて、#linkboxはその中で絶対配置さ
れてるわけですね。絶対配置が原点として参照するのはコンテナブ
ロックですが、これは「position:staticでない直近の祖先要素、該
当する要素が無ければルート要素」なんだそうです。ということ
は、#headerが#linkboxの配置の原点として機能しているのなら、
#headerはpositionにstatic以外の値を持つはずです。

お礼

アドバイスどうもありがとうございます。

> もしかしてdiv{position:relative}とか指定してませんかね。

一応再度確認しましたが、やはりrelativeを記述したpositionはなかったです。

> 要は#headerが中央揃えになってて、#linkboxはその中で絶対配置されてるわけですね。

はい、その通りです。

> 絶対配置が原点として参照するのはコンテナブロックですが、これは「position:staticでない直近の祖先要素、
> 該当する要素が無ければルート要素」なんだそうです。

見返してみましたが、position:staticも記述ありませんでした。
直近の祖先要素ということで言えば、やはり記述いたしましたheaderになります。

> ということは、#headerが#linkboxの配置の原点として機能しているのなら、
> #headerはpositionにstatic以外の値を持つはずです。

既出のように、header要素にはpositionは記述していないですから、そうなりますと、

●祖先要素に”staticが無い”ので、その要素が原点となる

ということで、今回のケースも直近の祖先要素であるheader要素にstatic記述はしていないから、
だからこれに当たるのだということだと理解いたしました。

補足

済みません、お礼を書いたあとに理解が違っているように思いました。

header要素にはposition: staticがないならばheader要素は配置原点ではないはず、

ということですね。
要は、私の記述内容ではやはりちゃんとセンタリングするのは何故かわからない、ということだと理解いたしました。
ありがとうございました。

ウ～ン・・・なんでちゃんと表示されるんだろう・・・・・