html - 元素落后于背景？

Question

我有一个元素将其自身(及其所有子元素)放置在相应部分的背景后面。页面上的任何其他元素，甚至同一部分中的任何其他元素，我都没有遇到过这个问题。我有一个内嵌的背景颜色设置，只是为了确保这是正在发生的事情。它发生在所有浏览器中。感谢您提供的任何帮助。

<div id="homepage_servicesstrip">
    <div id="homepage_web_drops_wrap" style="background-color:red;">
    </div>
</div>

    #homepage_servicesstrip {
        background:url('home/images/gradient-services-background.png');
        background-size: auto 100%;
        position:absolute;
        margin-top:0px;
        width:100%;
        height:1050px;
        z-index:1;
    }
    #homepage_web_drops_wrap {
        position:absolute;
        margin-top:60%;
        margin-left:10%;
        height:500px;
        width:80%;
        z-index:60;
    }

Answer 1

z-index 首先计算 sibling ，然后计算 child 。例如 HTML

<div class="box">
    <div class="one box"></div>
</div>
<div class="box">
    <div class="two box"></div>
</div>
<div class="box">
    <div class="three box"></div>
</div>

CSS

   .box {
       z-index:1;
   }
   .two {
       z-index:1000000;
    }

.two 不会在 .three 之上，因为 .three 的 父级在 .two 的 父级之上。

DEMO