Div не выходит вперед: Z-Index

Question

Я использую код ниже, но .under не поднимается выше (и скрывается) #portfolio_content .img img как следует на hover.

#portfolio_wrap {
    overflow:hidden;
    width:980px;
    float:left
}
#portfolio_content {
    float:left;
    clear:both;
    margin:0 auto;
    overflow:hidden;
    width:650px!important
}
#portfolio_content ul {
    list-style:none
}
#portfolio_content .img a { }
#portfolio_content .img a:hover { }
#portfolio_content .img {
    display:block;
    float:left;
    height:210px;
    margin:0 35px 35px 0!important;
    overflow:hidden;
    padding:0;
    width:307px
}
#portfolio_content .img img {
    display:block;
    position:absolute!important;
    overflow:hidden;
    z-index:3!important
}
#portfolio_content .img .title, #portfolio_content .img .title a {
    font-size:22px;
    margin:100px 0 10px 0;
    float:left!important;
    width:307px;
    text-align:center;
    position:relative
}
.desc {
    font-size:13px;
    display:block;
    text-align:center!important;
    margin:0 auto!important;
    width:307px
}
.under {
    z-index:2!important;
    display:inline;
    position:absolute;
    width:307px;
    height:210px
}
.under:hover { z-index:4!important }

Есть мысли? Я предполагаю, что это связано с z-index, но я не знаю, что я сделал неправильно.

Answer 1

Не видя отображенную страницу, я должен был бы предположить, что проблема в том, что вы не можете на самом деле навести курсор на .under (z-index:2), так как изначально он скрыт под #portfolio_content .img img (z-index:3), и поэтому вы бывместо этого просто наведите img.

Answer 2

Вы не можете парить над .under, так как он всегда «под» вашими изображениями, tw16 прав.

Вместо того, чтобы играть с z-индексами, попробуйте на самом деле поместить .under внутри .img, но сверхуваших изображений и с display:none, а затем сделайте что-то вроде:

.img:hover .under{
    display:block;
} 

Я мог бы добавить, что ваша разметка не совсем оптимизирована, и .img должен быть непосредственно размещен на тегах a, а нена бесполезных внутри span s, которые все равно слишком много:)

Редактировать: (как ответ на комментарий)

В случае, если нет изображения для показаваша разметка будет отличаться (как я полагаю, генерируется серверным скриптом, например, php), как если бы его нужно было отобразить (например, вы не отобразите тег img).Вы также можете использовать это условие для написания двух разных классов, например .img и .no-img:

.no-img .under{
    display:block;
}

.img .under{
    display:none;
}

.img:hover .under{
    display:block;
}