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示例

Answer 2

您好，我看過您的代碼“問題是當.item_body可見並且打開了窗體，窗體在項目下方。我希望它結束​​” ，窗體在“ item.body上方”，如果您的意思是你想要的格式不重疊，你應該檢查出的HTML結構item.body因為什么也沒有分開適當這些元素screnshot