HTML CSS DIV мобильного дисплей

Question

У меня есть IMG в наборе сНа в качестве фона со следующим CSS:

#div1{ 
background: url(../img/img1.jpg); 
background-size: cover; 
background-position: center; 
width: 100%; 
height: 100%; 
position: fixed; 
z-index:-100; 
} 

Это Диво dispalys в IMG отлично в центре экрана. Мой второй DIV с текстом имеет следующий CSS:

#div2 { 
min-height: 200px; 
background: black; 
opacity: 0.9; 
width: 100%; 
z-index: -1; 
position: relative; 
top: 494px; 
} 

дивы дисплей штрафа на моем компьютере. Однако, когда я открываю сайт на своем мобильном устройстве, div с текстом не отображается. После масштабирования вы можете видеть, что div находится под div с img. Почему это так, так как указаны z-индексы и что я могу сделать, чтобы изменить это?

Answer 1

Просто увеличьте значение z-index до положительного.

#div2 { 
min-height: 200px; 
background: black; 
opacity: 0.9; 
width: 100%; 
z-index: 999; 
position: relative; 
top: 494px; 
}