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

我认为你的问题是你将一个重叠元素嵌套在另一个内部，而它们通常应该只是兄弟姐妹。

请参阅此小提琴，了解其实现方法：http://jsfiddle.net/GCprD/

Answer 2

虽然用HTML结构做到这一点并非不可能！

http://jsfiddle.net/GCprD/1/

但我同意m90的解决方案更好。

如何叠加div背景？

2 个答案: