html - html css div 移动显示

Question

我在 div 中有一个 img 设置为背景，具有以下 css：

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

这个 div 将 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 的 div 下方。为什么会这样，因为给出了 z-indexes，我能做些什么来改变它？

Answer 1

只需将z-index值增加到正值。

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