z-index忽略：2个固定的div，其中1个位于相对div的位置

Question

我有一个很难打出头衔的头衔。我在出现在模态窗口顶部的twitter bootstrap叠加层时遇到问题，我可以用下面的html来说明我的问题。我还提供了jsfiddle。

<div style="position: relative; z-index: 1;">
    <div style="background: blue; position: fixed; z-index: 3;">
    </div>
</div>
<div style="background: green; position: fixed; z-index: 2; top: 0">
</div>​

如何让蓝色div出现在绿色div的顶部？为什么绿色div位于蓝色div之上？

Answer 1

您好已经习惯了这个演示http://jsfiddle.net/rohitazad/UnTvQ/5/

定义顶部div z-index

<div style="position: relative; z-index: 3;">
    <div style="background: blue; position: fixed;">
    </div>
</div>
<div style="background: green; position: fixed; z-index: 2; top: 20px; left:10px;">
</div>

<强> Live demo

详细了解如何工作 z-index链接 here