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

位置：相对;左：-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>

Answer 2

我在图像模板中看到的唯一类似于重叠的是褐色条，但是你不需要使用重叠的<div>来做这个，只需要使用棕色条和图像的图像蓝色马赛克作为<body>的背景图片，并将所有内容放在<div>内。

CSS - 重叠 - 有效

2 个答案: