元素不会通过覆盖层发光

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;
}

元素不会通过覆盖层发光

elements don't shine through overlay

html

css

overlay