Jquery 淡入图像不显示'；不要忘记淡出的图像

我有6张图片，在悬停时，每张图片都会被另一张淡出（使用jQuery）的图片替换，并在初始图片上显示

问题是，当图像淡出时，它会位于原始图像下方，而不是上方

由于淡入/淡出效果很好，我认为这个问题属于我的css代码：

CSS:

#puzz {
    border-color:#000000;
    background-color:#00CC33;
    position:fixed;
    left:20%;
    top:13%;
    width:900px;
    height:650px;
}
li {
    list-style:none;
    float:left;
    list-style:none;
    padding:8px;
    margin:10px;
    line-height:10px;
    width:218px;
    height:218px;
    overflow:hidden;
    background:#99CCFF;
    /*For IE9 compatibility*/
    behavior: url(border-radius.htc);
    border-radius: 8px;
}
.fade div {
    position:absolute;
    top:auto;
    left:auto;
    display: none;
}

<div id="puzz">
    <ul>
        <li>
            <div class="fade"><img src="img7.jpg" />
                <div><img src="img8.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img2.jpg" />
                <div><img src="img5.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img3.jpg" />
                <div><img src="img4.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img4.jpg" />
                <div><img src="img3.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img5.jpg" />
                <div><img src="img2.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img6.jpg" />
                <div><img src="img1.jpg" /></div>
            </div>
        </li>
    </ul>
</div>

HTML:

#puzz {
    border-color:#000000;
    background-color:#00CC33;
    position:fixed;
    left:20%;
    top:13%;
    width:900px;
    height:650px;
}
li {
    list-style:none;
    float:left;
    list-style:none;
    padding:8px;
    margin:10px;
    line-height:10px;
    width:218px;
    height:218px;
    overflow:hidden;
    background:#99CCFF;
    /*For IE9 compatibility*/
    behavior: url(border-radius.htc);
    border-radius: 8px;
}
.fade div {
    position:absolute;
    top:auto;
    left:auto;
    display: none;
}

<div id="puzz">
    <ul>
        <li>
            <div class="fade"><img src="img7.jpg" />
                <div><img src="img8.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img2.jpg" />
                <div><img src="img5.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img3.jpg" />
                <div><img src="img4.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img4.jpg" />
                <div><img src="img3.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img5.jpg" />
                <div><img src="img2.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img6.jpg" />
                <div><img src="img1.jpg" /></div>
            </div>
        </li>
    </ul>
</div>

---

如果使用的是

position:absolute

，则需要在父元素

上指定

position:relative

，以便原点匹配。您还应该指定

top:0；左：0，问题已修复

我只是在CSS中做了一些更改，将a图像放在另一个图像的“上面”
 这不是一个真正的答案，更像是一个建议，你有没有尝试过
z-index
ing你想弹出的图像？你能发布你的Jquery吗？Josh的想法是对的。。它看起来像是
z-index
冲突。根据您希望它们重叠的方式，您可能需要使用动态
z-index
值来交换元素的深度jQuery@Marcelo：我在帖子中添加了jQuery代码：）@McMaster：我是jQuery新手，你能指导我吗？我在帖子上加了我的代码。请检查：）您好，谢谢您的建议，实际上我已经试过了，它得到的图像正好位于原始图像的下方（没有超出
li
边界），这是与我的代码的唯一区别，因此图像仍然没有超出原始图像。这里，看看我的淡入淡出代码。它通过设置一个图像作为背景，将另一个图像放在顶部，并
左边距：8px；边缘顶部：8px.fade div
中编码>以获得与原始图像完全相同的图像；）+一百万塔克斯：）