html - より高い Z インデックスを持つ絶対位置の div は、他の div の下に表示されます

Question

検出できないエラーのある HTML コードがあります。これが私のJSFiddleです。

特に、「もっと見る」に移動すると、最高の z-index を持つ絶対位置の div がすべての上に表示されます。ただし、ご覧のとおり、最初の絶対配置の div は他のコンテンツの下に表示されています。同様の質問からの回答で提供されz-indexているようpositionに、.div

この問題を解決するアイデアはありますか?

Answer 1

Ghost Answerのコメントのおかげで、問題は解決しました。

他の回答では、ホバー時に表示されるdivのすべてのコンテナーに、増加するz-index値とaを配置する必要があることを読みました。position:relative多分それは常に真実ではありません。これが私がしたことです：

1. すべてのz-index値と不要な配置を削除しました（後者は意味がないと思います）。
2. z-index:autoホバー時に表示するdivのコンテナに設定しました。

これでコードは正常に機能します。これは更新されたJSFiddleです。

Answer 2

興味深い問題です。

次の z インデックスを変更します。

.offer-content, .offer-content-info-shops{z-index:auto}

.detail-modal-window{z-index:1}

http://jsfiddle.net/gteEg/12/

これにより、すべての要素の z インデックスが相互に比較されます。

あなたが抱えていた問題は、z-index を offer-content と .offer-content-info-shops に割り当てたため、スタック コンテキストを作成したためです。つまり、.detail などの .offer-content-info の子要素-modal-window には、.offer-content-info-shops の兄弟と比較して z-index がありました。

https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index

Answer 3

このcssを試してください

 .offer-info-shops span
position:absolute;
z-index:1000;

JSFIDDLE