我在页面顶部有一个表单(根据按钮点击切换):
<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 .
提前谢谢你。
最佳答案
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;
}
关于html - z-index 在固定元素上无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30356219/