Javascript jQuery淡入淡出元素的Z索引问题

因此，我有一个交互式图形，在其中单击一个div，它将显示此人的相关信息。我正在使用“动画”在不透明度高达1的情况下淡入淡出。问题是，当不透明度达到1时，它会跳到刚才单击的div后面

这就是其中一块板的结构

<div class="boardbg board1bg">
    <div class="rollover person-1"><img src="images/hardie.png"/></div>
    <div class="rollover person-2"><img src="images/bernstein.png"/></div>
    <div class="rollover person-3"><img src="images/haldane.png"/></div>
    <div class="rollover person-4"><img src="images/cohen.png"/></div>
    <div class="rollover person-5"><img src="images/dawson.png"/></div>
    <div class="info person-1">
        <h3>hardie</h3>
        <p>blablablablabla
        </p>
        <h5>click to close</h5>
    </div>
    <div class="info person-2">
        <h3>bernstein/h3>
        <p>blablablablabla
        </p>
        <h5>click to close</h5>
    </div>
    <div class="info person-3">
        <h3>haldane</h3>
        <p>blablablablabla
        </p>
        <h5>click to close</h5>
    </div>
    <div class="info person-4">
        <h3>cohen</h3>
        <p>blablablablabla
        </p>
        <h5>click to close</h5>
    </div>
    <div class="info person-5">
        <h3>dawson</h3>
        <p>blablablablabla
        </p>
        <h5>click to close</h5>
    </div>
    <div class="backbtn">BACK</div>
</div>

我尝试使用cssz-index属性来纠正这个问题，但没有效果。这和他们都在同一个部门有关吗

如果您遵循此链接并选择左上角的图片（先锋），然后单击任何图片，您可以看到一个示例

---

谢谢你的帮助，我被难住了

尝试将不透明度的值更改为0.99

您的

.info

（=Infotext）默认为

位置：静态

，但您的

.rollover

（=photos）是

位置：绝对

，因此它们始终位于顶部。只需在CSS中设置：

.info {position: relative;} // now you're done

顺便说一句：

• 我无法解释为什么在动画中，

  .info

  处于顶部

• z-index

  仅适用于具有非静态位置的元素

.info {position: relative;} // now you're done