Question

我想在单击编辑按钮时创建一个叠加层。只有编辑字段才能通过叠加层显示。我的html结尾处有这个div：

<div class='overlay closed'></div>

以下css：

.closed 
{
    display: none;
}
.overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.3;
    z-index: 70;
}

这正确地显示了网站上的叠加层。

我有几种形式，在叠加层可见时应该可以访问。例如：

<div class='edit-container closed'>
   <form action="#" method='post'>
      <textarea></textarea>
      <input type='submit' value="safe" />
      <input type='reset' value='cancel' />
   </form>
</div>

我试过跟随css将这些div放在叠加层上：

#content.project .edit-container {
   z-index: 71;
}
#content.project .edit-container * {
    z-index: 71;   
}

你能告诉我为什么，或者我做错了什么？提前谢谢。

Answer 1

position:relative;

需要edit-container

http://jsfiddle.net/hwh0nnxo/

<强> HTML

<div class='edit-container'>
   <form action="#" method='post'>
      <textarea></textarea>
      <input type='submit' value="safe" />
      <input type='reset' value='cancel' />
   </form>
</div>
<div class='overlay'></div>

<强> CSS

.closed {
    display: none;
}
.overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.3;
    z-index: 70;
}
.edit-container{
    position: relative;
    z-index: 71;
}

元素不会通过叠加层闪耀

1 个答案: