элементы не светят через наложение

Question

Я хочу создать наложение, которое показано, когда нажата кнопка редактирования. Только поля редактирования должны быть видны через оверлей. У меня есть этот DIV в конце моего HTML:

<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, чтобы поставить эти дивы над накладкой:

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