html - 如何叠加 div 背景？

Question

这里我有两个 div，它们都设置了 CSS 背景图像。我试图让 div 重叠，这样我就可以有一个虚线图案覆盖。我觉得我做对了，但出现了错误的 div。知道为什么会这样吗？

这是网站:http://designobvio.us/portfolio/body.html

HTML:

<section class="bodySection">
 <div id="body-wrapper" class="container_12">

  <div id="left-container" class="grid_5">
   <div class="content">
   </div>
  </div><!--end of left-container-overlay-->
 </div><!--end of left-container-->
</div><!--end of body-wrapper-->

</section><!--end of bodySection-->

我的 CSS:

 #left-container {
    background:url(../img/sliderBG.png)transparent repeat;
    width:400px;
    height:100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    position:absolute;
    overflow:hidden;
    display:block;
    height:100%;
    top:0;
    z-index:5;
}
#left-container .content {
    background:url(../img/Me.jpg) repeat-y;
    width:400px;
    height:100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    position:absolute;
    overflow:hidden;
    display:block;
    height:100%;
    top:0;
    z-index:1;
}

谢谢大家!

Answer 1

我确实认为你的问题是你将一个重叠元素嵌套在另一个元素中，而它们通常应该只是 sibling 。

请参阅此 fiddle 以了解执行此操作的方法:http://jsfiddle.net/GCprD/