为什么我的<img>元素的堆栈顺序颠倒了？

我正在创建一个改变背景的网站。我这样做是通过将我的背景图像设置为与我的浏览器相同的宽度/高度，并将它们的opacity设置为0。为什么我的<img>元素的堆栈顺序颠倒了？

当我想要一个特定的背景图片出现时，我使用Javascript将背景图片的opacity设置回1。所有的背景图像都堆叠在一起，并且具有绝对定位的容器。当我这样做时，我注意到一些奇特的东西。看起来代码中FIRST的后台<img>在后面的代码中位于后台<img>的顶部。

从我的理解，如果两个元素具有相同的z-index并重叠，代码中的LATER元素将在另一个上面。那么代码中最后的<img>元素不应该放在第一个元素的顶部吗？相关代码如下。

HTML：

<body> 
<div id="bg_container"> 
<img id="bg_3" src="bg/bg_midori.png" width="1366px" height="662px"> 
<img id="bg1_2" src="bg/bg1_2.png" width="1366px" height="662px"> 

<!-- When I test my website, "bg_3" is on top of bg1_2. Should bg1_2 be on top of bg_3? Both <img> are supposed to have the "cover_bg" class but I removed so it's obvious that "bg_3" is on top of bg1_2 !--> 

</div>

CSS：

body{ 
    background-image:url('bg/bg_image.jpg'); 
    /*Above is the default background image */ 

    } 

#bg_container{ 
    width:1366px; 
    height:662px; 
    position:absolute; 
    top:0px; 
    left:0px; 
    z-index:-1; 
    overflow:hidden; 
    } 

.cover_bg{ 
opacity:0; 
}

的是什么，为什么我的堆栈为了我的背景<img> s的逆转任何想法？

我注意到，当我用下面的代码，后台<img>，后来是在代码上的<img>顶部出发吧，正如我所料。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
img{ 
    position:absolute; 
    left:0; 
    top:0; 
    } 
</style> 
</head> 
<body> 

<div id="bg_container"> 
<img id="bg_3" class="cover_bg" src="bg/bg_midori.png" width="1366px" height="662px"> 
<img id="bg1_2" class="cover_bg" src="bg/bg1_2.png" width="1366px" height="662px"> 

<!-- In this case bg1_2 is on top of bg_3, as expected !--> 
</div> 
</body> 
</html>

来源

2016-12-18 Alex Fidel Chen

不确定这是否是原因，但是CSS中存在拼写错误。 'z-index = -1;'应该是'z-index：-1;' –

我修正了这个问题，但堆栈顺序仍然混淆。 –

你能提供一个jsFiddle吗？ – jcaron