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

divs 在我的电脑上显示正常。但是，当我在手机上打开该网站时，没有显示带有文本的 div。缩小后，您可以看到 div 在带有 img 的 div 下方。为什么会这样，因为给出了 z 索引，我可以做些什么来改变它？

Answer 1

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

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