Почему z-index работает некорректно?

Question

[MrGaunt]

Делаю модальное окно с полями ввода. Оно должно закрываться по нажатию на любую область вокруг него. Ниже CSS код самого окна и невидимого блока, по нажатию на который PopUp будет закрываться. Проблема с z-index в том, что у popup оно максимально: 999999, а у invise-block значение может быть от 999 до 99999, но он в любом случае будет находится поверх модального окна. Если же поставить 99, то невидимый блок уже прячется под контент сайта и его нет. Вроде бы использую все советы данные в этой статье на Хабре, но всё равно ничего не помогает.

Понимаю, что тут еще всё зависит от структуры построения сайта, и по одному CSS блоков ничего сказать нельзя, но может просто я что-то не понимаю.

/* блок модального окна */
.popup-block {
	display: none;
	background: #111214;
	padding: 20px;
	float: left;
	font-size: 85%;
	position: fixed;
	top: 450px; left: 51%;  	
	color: #000;
	min-width: 1000px;
	height: auto;
	z-index: 999999;
	-webkit-box-shadow: 5px 5px 20px #000;
	-moz-box-shadow: 5px 5px 20px #000;
	box-shadow: 5px 5px 20px #000;
}
/* невидимый блок */
#invise-block { 
	display: none;
	position: fixed; 
	left: 0; top: 0;  	
	background-color: rgba(0,0,0,0);
	width: 100%; height: 100%;
	opacity: .80; 
	z-index: 999;
}

Answer 1

[Денис Инешин]

Можно вообще не париться с z-index если сделать правильно. Например поместить элементы в конце html-кода. Вот так:

... контент сайта

    <div id="invise-block"></div>
    <div class="popup-block">
        Popup Content
    </div>
</body>

Answer 2

[Роман]

вы бы еще стопицотмилионов в качестве значения з-индекс установили. Скорее всего у вас переполнение произошло или некорректно обрабатывается значение. Сделайте его меньше. Ведь вам и з-индекс: 1000 хватит с головой.