html - z-index 在固定元素上无法正常工作

Question

我在页面顶部有一个表单(根据按钮点击切换):

<span id="add_toggle">+</span>
<form id="add_item">
    <!-- form stuff -->
</form>

我有一个容器中的元素列表，每个元素都有以下结构:

<div id="items">
    <div class="item">
        <div class="item_head">Item 1</div>
        <div class="item_body">
            contents of item 1
            <button class="btn">go</button>
        </div>
    </div>
    <!-- similar items -->
</div>

.item_body 最初有 dispaly: none; 并在 .item_head 单击时打开。它有一个 position: fixed; 所以所有这些元素都显示在页面的中间。

问题是当 .item_body 可见并且表单打开时，表单位于元素下方。我希望它结束​​。

我尝试将不同的 z-index 添加到 form、#items、.item 和 .item_body.唯一有效的是当我给 .item_body 一个负的 z-index 时。但这使得它的内容无法访问(例如无法单击按钮等)。

这是一个 jsfiddle DEMO .

提前谢谢你。

Answer 1

z-index属性仅适用于定位元素(使用非默认静态位置的元素)。添加position:relative给你的<form id="add_item"> :

#add_item {
    display: none;
    margin-top: 5px;
    padding: 10px;
    background-color: green;
    width: 90%;
    border-radius: 5px;
    z-index: 10;
    position:relative;
}

jsFiddle example