ie7 z-index bug...修复时遇到问题

Question

我有 2 列（几行）的 div，如下所示：

<div class="odd">
    <div class="desc"></div>
</div>
<div class="even">
    <div class="desc"></div>
</div>

odd 和 even 类相对 z-index 为 1 且 desc 定位> 类的 z 索引为 5 进行绝对定位。它的设置使得奇数内的 desc 与右侧的偶数重叠， even 内的 desc 与左侧的 odd 重叠。

除了在 ie7 中之外，这都可以正常工作。 odd 中的 desc 显示为 even 下方。我尝试了几件事，我想出的唯一解决方案只是颠倒了我的问题，我将奇数设置为 2 的 z 索引，将偶数设置为 1 的 z 索引，但是那么偶数的 desc 就隐藏在奇数下面。

我希望这是有道理的。我基本上是在展示产品，当您将鼠标悬停在图像上时，旁边会弹出描述（在旁边的产品上，向左或向右表示偶数或奇数）。除了 ie8 之外，它工作正常。

有解决办法吗？

这里更新

的是CSS：

.even, .odd
{
    padding:5px;
    width:332px;
    float:left;
    position:relative;
}

.desc
{
    height:300px;
    padding:5px;
    position:absolute;
    top:30px;
    z-index:5;
    width:300px;
    visibility:hidden;
}

.even:hover .desc, .odd:hover .desc
{
    visibility:visible; 
}

.even:hover .desc:hover, .odd:hover .desc:hover
{
    visibility:hidden;  
}

.even .desc
{
    right:100%;
}
.odd .desc
{
    left:100%;  
}

Answer 1

父 z 索引始终优先于其子索引。这是 W3C 对该行为的官方定义。因此，如果您的 desc1 和 desc2 分别为 10 和 10 ，这并不重要。 400 作为 z-index 值，只要你的奇数类有 1，偶数有 2，偶数总是在顶部。