CSS使用z-index将div定位在顶部

Question

我有一个有三个div的容器。 每个div都包含一个隐藏的div，它有一个'hide'类（ display:none; ），当它悬停在它的父div上时应该显示。

我使用toggleClass('show')使secretDiv显示有一个块。 我需要在悬停在父div上时显示secretDiv。

父div应该显示在下面的div之上，而不是推动其他div

http://jsfiddle.net/2xLMQ/4/

--- HTML ---

<div class="row">
    <div class="element">
        <img src="http://placehold.it/200x100" alt="" title="" />
        <div class="secretDiv hide">
            <p>Some secret text and stuff</p>
        </div>
    </div>
    <div class="element">
        <img src="http://placehold.it/200x100" alt="my image" title="image title" />
        <div class="secretDiv hide">
            <p>Some secret text and stuff</p>
        </div>
    </div>
</div>

<div class="row">
    <div class="element">
        <img src="http://placehold.it/200x100" alt="" title="" />
        <div class="secretDiv hide">
            <p>Some secret text and stuff</p>
        </div>
    </div>
    <div class="element">
        <img src="http://placehold.it/200x100" alt="my image" title="image title" />
        <div class="secretDiv hide">
            <p>Some secret text and stuff</p>
        </div>
    </div>
</div>

--- CSS ---

.hide {display:none;}
.show {display:block;}
.row {height:160px;background:#dedede;float:left;width:480px;position:relative:z-index:1;}
.row .element {position:relative;z-index:9;text-align:center; float:left; background:#666;width:200px;padding:12px;margin:6px;}
.row .image {}
.row .secretDiv {background:#ff0000;padding:8px;}

--- JS ---

$('.element').hover(function(){
    $('.element .secretDiv').toggleClass('show');
});

Answer 1

首先，将您的选择器更改为仅匹配相应的隐藏div：

 $('.secretDiv',this).toggleClass('show');

然后在该项目上添加另一个类以显示其他项目的ontop：

$(this).toggleClass('ontop');

和班级：

.row .ontop {z-index:10;background:orange;}

检查这个演示

Answer 2

只需为您的'秘密'div添加绝对定位：

.row .secretDiv {background:#ff0000;padding:8px; position: absolute; top: 5px; left: 5px;}

在这里小提琴： http ： //jsfiddle.net/moonspace/2xLMQ/12/

作为奖励，我编辑了你的jQuery，只显示与每个元素相关的'secret'div：

$('.secretDiv', this).toggleClass('show');