css - Internet Explorer の z-index バグ?

Question

Internet Explorer で相対的に配置されている別の要素の上に要素を重ねるにはどうすればよいですか? Z-index は機能しません。相対的に配置された要素の背後に常に表示されます。

Answer 1

ふざけているように見えますが、そうではありません

.myLinkCssClass {
    background          : url(#);
}

Answer 2

私はこの問題に本当に苦痛を感じましたが、この特定の回避策は関係ありませんでした。説明するのは少し難しいので、コードを使ってみます。

<div id="first" style="z-index: 2">In between</div>
<div id="second" style="z-index: 1">In the back
<div id="third" style="z-index: 3">Foreground</div></div>

問題は、親のz-indexをより高い値に設定すると、本来あるべき場所の後ろではなく、前に移動することです。私は偶然に完全に解決策に出くわしました。親の外に前景要素（id = third）のコピーを作成しました。

<div id="first" style="z-index: 2">In between</div>
<div id="third" style="z-index: 3; visibility:hidden">Foreground</div>
<div id="second" style="z-index: 1">In the back
<div id="third" style="z-index: 3">Foreground</div></div>

私の元のコードでは要素にIDがないため、2つの要素が同じ要素を共有してHTMLを無効にすることに悩まされることはありません。

この奇妙さを、たまたま元のバグに役立つ別のバグとして分類するのは安全だと思いますが、少なくとも私にとっては機能します。誰かがこれが役に立つと思うことを願っています！

Answer 3

コンボボックス (選択タグ)、iframe、またはフラッシュ ムービーの上に何かを配置しようとしている可能性はありませんか?

そのような場合、z-index は失われた原因です。

それ以外の場合、使用しているブラウザのバージョンは何ですか?また、絶対配置を使用していますか?

Answer 4

I wanted to note that if you are using IE8 and below, it does not support CSS3 filters. This was my issue.

I was using:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@black00', endColorstr='@black00', GradientType=0);

No matter what I set my position or z-index to, you could not see the other layer because it was causing a complete mask over that layer (instead of going from clear to black and to clear again).

By removing the CSS3 filter for just IE8, I was able to solve my problem.

Hope this helps someone who runs into the same issue.