読者です 読者をやめる 読者になる 読者になる

エンジニアをリングする

プログラをミングしたり。

my web site twitter

position: absolute; + display: table;の謎を解きたい

CSS

10/23 追記: absolute + tableの謎が解けた!!!! - エンジニアをリングする

CSSでちょっと前から悩んでいる挙動があります。

  • heightプロパティを%指定するときには、包含ブロックにheightの値が指定されている必要がある
  • しかし、絶対配置(positionがabsoluteかfixed)されている要素は包含ブロックにheightの値がなくてもheightを%指定できる。

ある要素の高さがcssではなく内包物によって保たれているような場合、その子要素にheightを%指定しようとしてもできなくてautoの扱いになるよ、 でもその子要素がposition: absolute;だったら特別にheightを%指定してもいいよ、親要素(包含ブロック)の内側の高さを基準にして計算してあげるよ、みたいな感じです。

実際に挙動をみてみましょう。

.wrapper(赤)が外側の要素。縦横200px。 その中に.inner(黄)と.spacer(見えない)があります。
.wrapperの高さが200pxなのは、子となる.spacerのheightに200pxを指定しているためなので、.wrapperにはheightの指定がありません。
この場合、子となる.innerにheight: 50%;を指定しても効きません。
でも、.innerのpositionがabsoluteであれば、height: 50%;が効いて.innerの高さは100pxになります。
上のfiddleがその状態です。

ここまでは仕様通りです。
ではここで.innerのdisplayをblockからtableに変更してみましょう。

height効いてないよ!!なんで!!!

※ この状態で.wrapperheight: 200px;を指定すると.innerのheightもちゃんと効きます。

この挙動の元となる仕様はどこで定義されてるんでしょうか・・・?
どなたかご存知でしたら教えてください><

今日CSS仕様書もくもく会に参加してきたので id:nxdebiru さんに質問してみたのですが、検証しているうちにさらに恐ろしいことが・・・

謎い!!!!!!!

ちなみにCSS仕様書もくもく会は毎月第三週開催、場所はGoodpatchですので是非!

togetter.com

そして前述の謎挙動(absoluteで効くはずのheightの%指定がtableにすると効かなくなる)、どなたかおしえてくださいっ!!