元素的孩子在其他元素顶部

Question

我有一个有趣的Z-INDEX问题。

这是我的HTML结构。

<div class="player">
<div class="player-line">
    <div class="player-handle"></div>
    <!-- /.player-handle -->
</div>
<!-- /.player-line -->
<div class="branch"></div>
<!-- /.branch -->

现在我的元素.branch必须超过.player-line，但永远不要超过.player-handle。这可能吗？ 这是我的JSFiddle experiment.

Answer 1

从z-index移除.player-line并将更高的z-index设置为.player-handle

示例：http://jsfiddle.net/t22EW/5/

（在Firefox和Chrome上测试）
截图

Answer 2

只要您的播放器句柄是您希望分支位于上方的对象的子级，就可以了。您将需要所有三个处于具有不同z-index值的相同DOM级别。

Answer 3

你想这样吗？将高z-index值赋予.player-line

.player-line {
        position: absolute;
        width: 370px;
        height: 100%;
        background: #4B93E6;
    z-index: 102;}

检查小提琴链接。 http://jsfiddle.net/kheema/t22EW/8/