jquery - jQuery slidein 背景问题

Question

我正在尝试使用 jQuery 向图像添加一些滑入/滑出描述，如 here 所述.当我将它应用到我的网站时，文本(在 <p> 中)按预期滑入，但由于某种原因，文本的背景显示在图片下方。我玩过 z-order 没有效果。到目前为止，我无法在一个简单的示例中将其隔离，但我希望这是常见问题之一...

$(document).ready(function() {

    $(".product-image").fadeIn("slow");  

    $(function(){  
        $('.productInfo').showFeatureText();    
    })

$.fn.showFeatureText = function() {
    return this.each(function(){    
    var box = $(this);
    var text = $('p',this);            

    box.hover(
        function(){
            text.slideDown("fast");
            text.css('z-index', '1000');    
        },
        function(){
            text.slideUp("fast");
        }
    );

  });
}

}); 

---

.product {
    float: left;
    margin: 10px 12px;
    width: 215px;
}

    .product .productInfo {
        height: 250px;
        overflow: hidden;        

    }

        .product h3 {
            font-size: 1.75em;
            font-weight: normal;
            margin: 0 0 0px 0;
            padding: 0;
        }

        .product-image {
            background-color: #edece8;
            border: 1px #e6e3d8 solid;
            height: 200px;
            margin: 0 0 0px 0;
            padding: 6px;
            width: 200px;
            display:none;

        }

        .product p {
            margin: -75px 6px 6px 6px;
            display:none;
            background: #000000; url(/Images/feature_bg.png) repeat;
            overflow: hidden;
            height:65px;
            width:200px;
            z-index:1;
            overflow:hidden;
        } 

Answer 1

z-index 没有 position 是没有意义的，所以尝试在图片及其容器和 上设置 position:relative p 是容器。此外，请务必对所有这些设置 z-index。