CSS - 重叠 - 有效

Question

是否有重叠 2 个 div 的有效方法。

我有以下内容，但无法让它们重叠。

#top-border{width:100%; height:60px; background:url(image.jpg) 0 0 repeat-x; float:left; position:relative;}
#header-wrap{width:100%; height:80px; background:none; float:left;}
#header{width:800px; margin:0 auto; height:80px; background:url(taller-image.jpg) 0 0 repeat-x}



<div id="top-border"></div>
<div id="header-wrap">
     <div id="header">links go here.</div>
</div>

这基本上给出了顶部横幅被“弹出”的效果但无法让它们重叠...

如图片顶部所示:http://www.boguscreek.com/images/template.jpg

Answer 1

position:relative;left:-30px 将元素 2 在元素 1 上方移动 30 像素

<style>
    #div1{
        width:100px; height:100px;
        border:1px solid red;
        float:left;
}

#div2{
    width:100px; height:100px;
    border:1px solid blue;
    float:left;
    position:relative;
    left:-30px;

</style>

<div id="div1">1</div>
<div id="div2">2</div>