javascript - jQuery 淡入淡出元素的 Z-index 问题

Question

所以我有一个交互式图形，您在其中单击一个 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>

jQuery 是这样工作的...

$( ".rollover" ).click(function() {
$(".info").css('display', 'none');
person = $(this).attr('class').split(' ')[1];
$(".info."+person).css('display', 'block');
$(".info."+person).animate({"opacity": "1"}, 200);
});

$( ".info" ).click(function() {
person = $(this).attr('class').split(' ')[1];
$(".info."+person).animate({"opacity": "0"}, 200);
$(".info."+person).css('display', 'none');
}); 

我曾尝试使用 css z-index 属性来纠正该问题，但无济于事。这与它们都在同一个 div 中有关吗？？？

如果您点击此链接并选择左上角的图片(先锋队)，然后单击任意图片，您可以看到一个示例。

http://thetally.efinancialnews.com/tallyassets/extramile/index.html

谢谢你的帮助，我很难过

Answer 1

您的 .info (=Infotext) 默认为 position: static，但是您的 .rollover (=photos) 是 position : absolute 所以他们总是在最前面。只需在您的 CSS 中设置:

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

顺便说一句:

• 我无法解释为什么 .info 在动画期间位于顶部。
• z-index 仅适用于非静态位置的元素。