Проблема. z-index 0, хотя я поставил 100, что делать?

Question

[artem]

z-index 0, хотя я поставил 100, что делать?
вот код:

.modal1 {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	overflow: auto;
	z-index: 100;
}

почему-то стоит ниже других блоков/текста, но индекс у других 0-2, в чем проблема?

Comments

[Сергей Сергей]

display: none меняется?

[artem]

Сергей Сергей, при вызове этого окна

[Сергей Сергей]

может какая-то функция выставляет "z-index:0"? вместе с display.

[artem]

Сергей Сергей,

window.onclick = function (event) {
 if(event.target == modal1) {
  modal1.style.display = "none"; 
 }

единственная функция

[iBird Rose]

а где стоит эта модалка? вангую что внутри блока с overflow: hidden;

[Сергей Сергей]

Придётся в отладчике посмотреть, чем перекрывается z-index. Может, даже отключать скрипты по очереди для выявления виновного.

[artem]

iBird Rose, нет, с auto

[iBird Rose]

artem, ну вот убери стиль в дебагере и посмотри. если модалка появится - значит оно

[WapSter]

artem, может ты в песочницу зальешь. А то вытягивают из тебя инфу, как молоко от быка.

[artem]

iBird Rose, уже все перепробовал, 3 элемента все равно выше модального окна, я выяснил, что у окна индекс 1 и его нельзя изменить, вот другим блокам поставил 0, а у некоторых просто нет такой возможности, ибо будут перекрыты.

[artem]

WapSter, Слишком большой код)

[artem]

вот участки кода, которые относятся к рабочему модальному окну и не рабочему

(работает)
(js)
var modal3 = document.getElementById("mymodal_sub");
var btn3 = document.getElementById("btn_modal_window_sub");
var close3 = document.getElementsByClassName("close_modal_sub")[0];

close3.onclick = function () {
	modal3.style.display = "none";
}

window.onclick = function (event) {
 if(event.target == modal3) {
  modal3.style.display = "none"; 
 } 
(html)
			<div class="modal3" id="mymodal_sub">
				<div class="modal_content3">
					<div class="close_modal_sub"><img src="img/cancel.png"></div>
					<p class="text_modal_w3">text</p>
				</div>
			</div>
(css)
.modal3 {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	overflow: auto;
	z-index: 98;
}

.modal_content3 {
	position: absolute;
	background-color: white;
	border: 1px solid #a7a7a7;
	border-radius: 10px;
	padding: 20px;
	width: 25%;
	height: 15%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 99;
}

.close_modal_sub {
	float: right;
	font-size: 30px;
	cursor: pointer;
	z-index: 100;
}

.text_modal_w3 {
	margin-top: 50%;
	font-size: 30px;
	font-family: "Century Gothic";
	font-weight: bold;
	text-align: center;
	color: #591426;
	transform: translate(0%, -175%);
}

(не работает)
(js)
var modal1 = document.getElementById("mymodal1");
var btn1 = document.getElementById("btn_modal_window1");
var close1 = document.getElementsByClassName("close_modal1")[0];

btn1.onclick = function () {
	modal1.style.display = "block";
}
close1.onclick = function () {
	modal1.style.display = "none";
}
window.onclick = function (event) {
 if(event.target == modal1) {
  modal1.style.display = "none"; 
 } 
(html)
			<div class="modal1" id="mymodal1">
				<div class="modal_content1">
					<div class="close_modal1"><img src="img/cancel.png"></div>
					<p class="text_modal_w1">ИНФОРМАЦИЯ О САЙТЕ</p>
					<p class="text_modal_w21">
					САЙТ СОЗДАН ДЛЯ ТОГО, ЧТОБЫ ЗРИТЕЛЬ МОГ ПОСМОТРЕТЬ 
					ИНФОРМАЦИЮ О ФИЛЬМЕ И НАЙТИ ДЛЯ СЕБЯ ПОДХОДЯЩИЙ. 
					САЙТ НЕ ЯВЛЯЕТСЯ 
					ПЛОЩАДКОЙ ДЛЯ ПРОСМОТРА ФИЛЬМОВ! ОН ЛИШЬ ПОМОГАЕТ 
					ОПРЕДИЛИТСЯ НАД ФИЛЬМОМ ДЛЯ БЛИЖАЙШЕГО ПРОСМОТРА, 
					А ТАКЖЕ САЙТ ПУБЛИКУЕТ НОВОСТИ О ФИЛЬМАХ, АКТЕРАХ И 
					КИНОИНДУСТРИИ В ЦЕЛОМ.</p>
				</div>
			</div>
(css)
.modal1 {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	overflow: auto;
	z-index: 100;
}

.modal_content1 {
	position: absolute;
	background-color: white;
	border: 1px solid #a7a7a7;
	border-radius: 10px;
	padding: 20px;
	width: 45%;
	height: 30%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1001;
}

.close_modal1 {
	float: right;
	font-size: 30px;
	cursor: pointer;
	z-index: 100;
}

.text_modal_w1 {
	font-size: 32px;
	font-family: "Century Gothic";
	font-weight: bold;
	text-align: center;
	color: #591426;
}

.text_modal_w21 {
	margin-top: 25px;
	font-size: 16px;
	font-family: "Century Gothic";
	font-weight: bold;
	text-align: center;
	color: #591426;
	line-height: 24px;
}

[RAX7]

artem, .modal1 во что вложена? И залить в песочницу - значит воспроизвести проблему на codepen или jsfiddle, а не выкладывать портянку в комментариях.

[Арсений Матыцин]

WapSter, судя по всему не додоили.

Изолируй код нормально в песочнице, как тебе говорят, иначе ты помощи не получишь, никто в здравом уме не будет читать этот шлак в одной не стилизованной портянке. Но, как только ты изолируешь проблему, то, как начал было говорить iBird Rose, скорее всего ее и не станет.

[artem]

Я решил проблему, у меня была путаница с html блоками

Answer 1

[Seanyr]

z-index работает только для элементов, у которых значение position задано как absolute, fixed или relative. Скорее всего проблема в этом. Что у этого элемента он выставлен, я вижу, проверяйте другие, которым z-index прописываете