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

Answer 2

你好，我看了你的代码“问题是当.item_body可见并且表格打开时，表格会在项目下面。我希望它结束”表格是“在“item.body上，如果你的意思是你希望表单不与item.body重叠，你应该检查HTML结构，因为那里没有任何东西可以正确地分隔这些元素screnshot

z-index在固定元素

2 个答案: