MW211 EXIT

devlog
CSS/絶対位置指定とtableタグの関係
2013年07月04日
「positon:absolute;」により絶対位置でオブジェクトを配置する場合、
それを乗っけるお盆みたいな存在が必要だ。
その役割をするのが、「positon:relative;」の親オブジェクトとなる。
(厳密には「positon:fixed;」とかでもいいけど)
┌──────────────────────────────────────┐
│<div style="positon:relative;">                                             │
│  <div style="positon:absolute;">■</div>                                   │
│</div>                                                                      │
└──────────────────────────────────────┘
ま、こんな感じで「positon:absolute;」を
「positon:relative;」中に内包させればよい。

じゃ、divタグじゃなくてtdタグでも…ってことで、以下のようにやりがちだ。
┌──────────────────────────────────────┐
│<table><tr><td style="positon:relative;">                                   │
│  <div style="positon:absolute;">■</div>                                   │
│</td></tr></table>                                                          │
└──────────────────────────────────────┘
不思議なことにFirefoxだけおかしく表示される。

Firefoxのバグ?いやいやこれが正式、W3Cのルールなのだ。
(他ブラウザは見逃しているが、Firefoxは忠実なのだ)

つまり、table系タグには「positon:relative;」は効かない!のだ。

ということで、回避策はdivタグを一個余分に噛ませてやればよい。
┌──────────────────────────────────────┐
│<table><tr><td><div style="positon:relative;">                              │
│  <div style="positon:absolute;">■</div>                                   │
│</div></td></tr></table>                                                    │
└──────────────────────────────────────┘

こういうルールにぶち当たると、tableタグによる(不要な)段組みはやめようかなと
思えてくるのだろう。
分類:CSS