Question

我正在创建一个更改背景的网站。我通过将背景图片设置为与浏览器相同的宽度/高度并将opacity设置为0来实现此目的。

当我想要显示特定的背景图片时，我使用Javascript将背景图片opacity设置回1。使用具有绝对定位的容器将所有背景图像堆叠在彼此之上。当我这样做时，我发现了一些奇特的东西。似乎代码中首先出现的背景<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>的堆叠顺序被颠倒了？

我注意到，当我使用下面的代码时，代码后面的背景<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>

Answer 1

只是一个可以帮助你的小链接。

从这篇文章：what-no-one-told-you-about-z-index

具有负z索引的定位元素首先在堆叠上下文中排序，这意味着它们出现在所有其他元素的后面。因此，元素可能出现在它自己的父元素后面，这通常是不可能的。这仅在元素的父元素位于相同的堆叠上下文中且不是该堆叠上下文的根元素时才有效。

取决于您应用背景更改的方式。一种方法是为z-index应用非负值，或者为可以通过jQuery修改的background_url使用#bg_container css属性。

Answer 2

https://www.w3.org/TR/css3-background/#layering

堆叠顺序根本没有搞乱，只是违反直觉。

HTML元素和CSS背景有自己的堆叠规则，这些规则相互对立。 HTML元素，例如<img>从下往上渲染（最新的元素将出现在堆栈中首先渲染的元素上方）。 CSS背景从上到下渲染（最近的背景图层将出现在堆栈中首先渲染的图层下方）。

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

2 个答案: