cssの話。

今さら感すごいがz-indexではまった罠。

今までz-indexプロパティを使用しないマークアップを心がけていたため
あまり意識していなかったのだが、どうしてもデザイン上、クライアントの都合上
z-indexで要素の重なりを指定し、わざと隠したような状態にせねばならなくなりまして。

実は先日までのデスマーチ中におこった話で、自分たちもそこで認識していたものの
この問題を優先順位を後回しにできたため、改めて検証。

どういうことかと言うと。

z-indexプロパティはdivなどのブロックレベル要素でボックスを入れ子にした時に、
positionプロパティでstatic以外の値が指定されている場合、
それぞれの要素はレイヤー状に重なっているため、
親要素の幅や高さに関係なく、好きな所に配置出来る。・・・本来ならば。

しかしながらIE7だけz-indexが効いていなかったわけで。
ここからが苦行デスヨ。

そもそも、cssでレイアウトや調整をするときに、
自分のやり方ではpositionプロパティなんぞ、基本的に使用しない。
なぜなら、必ずブラウザ間でずれるのと、cssの変更・追記や、
他の人が見た場合や自分が改めて見たりなど運用時の解析もしにくく、
理解しにくい、されにくいようなことにもなり
冗長な書き方になりスマートではないから。

他ブラウザは問題なく、
IE7だけに問題があったということも、イライラを増幅。
「ふざけんな、オラ、エー？」「何コラ！もう一回言ってみろコラ！」という
チョーノさんチョーシューさん的なやりとりを脳内で繰り返してたわけです。

で、調べたら、
IE7限定なんだろうけど、z-indexは同一階層間での重ね順の前後を指定するもので、
グローバルに前後を指定するものではなかったと。

つまり。
各階層で後に書かれたものが上のレイヤーにのっかることになる。
深い階層でどんなにz-indexを操作しても、
その要素を含む浅い階層でz-index指定されていなければ、
どんなに値を入力したとしても、
浅い階層上で後に書かれた要素よりも上のレイヤーにさせることはできないってさ・・・

なんだこれ！バカか！

これ、あくまでIE7限定で。

他ブラウザではちゃんと解釈してるからね！
べ、べつにあんたのために言ってるんじゃないんだからね！
という誰に向けて言っているのかわからんことも言いますよそりゃ。

Firefoxなんかは、ブロックをまたいで解釈してくれていると。
対するIE7はブロック内の順番の指定はしてくれているが、
ブロックをまたいで解釈されることがない。

さらについでにわかったこと。
IE7は「hover時にz-index以外の別の属性も変更させないとz-indexが反映されない。」
ということは、aタグでz-indexを操作したい場合は、それを包括する、またはされる
すべての要素に対して属性を変更させないとならんつーことか。

めんどくせえええええ！

【個人的実証結果】
親要素のボックスに対してじゃなく、
入れ子要素のボックスにposition:relative（またはabsolute）を追記することでz-indexが有効になった。
継承される親要素はコンテンツ全体を囲むボックスだったので。

燃えてしまえばいいのに。