2

我一共有三个div。两个相互重叠的背景 div，一个用于内容将位于较低的 div 内。我的问题是我试图让内容覆盖两个背景 div，所以我给它的上边距为 -20px。它在 Dreamweaver 中为我提供了正确的结果，但是一旦我在 Safari 中打开它，内容 div 就会随之拉动较低的背景 div。

<div style="height:40px; width:500px; margin-left:auto; margin-right:auto; background-  color:#CF3; margin-top:100px;"></div>
<div style="height:100px; width:400px; margin-left:auto; margin-right:auto; background-color: #0FF;">
    <div style="height:80px; width:300px; margin-left:auto; margin-right:auto; background-color: #F00; margin-top:-20px;"></div>
</div>

这就是我想要的： 我想要的图片 http://www.snapfoot.com/audio/good.jpg

我不想要但正在得到的东西。我需要蓝色的保持下来，而不是与红色一起上升。 我不想要的图片 http://www.snapfoot.com/audio/bad.jpg

我哪里错了？感谢您的帮助！

4

2 回答 2

1 
<div style="height:40px; width:500px; margin-left:auto; margin-right:auto; background-color:#CF3; margin-top:100px;"></div>
<div style="height:80px; width:300px; margin-left:auto; margin-right:auto; background-color: #F00; margin-top:-20px; position: relative; z-index: 9999;"></div>
<div style="height:100px; width:400px; margin-left:auto; margin-right:auto; background-color: #0FF; margin-top: -60px;">
</div>

这是你想做的吗？

这是一个小提琴：http: //jsfiddle.net/TzK6a/1/

于 2013-06-06T19:27:36.730 回答
1

的HTML

<div id="backgroundTop" class="center">
    <div id="content" class="center"></div>
</div>
<div id="backgroundBottom" class="center"></div>

通过将#contentdiv 放入其中，#backgroundTop您将能够定义内容相对于背景 div 的上边距。这是使用 CSS 完成的（见下文）。

CSS

#backgroundTop
{
    height:40px;
    width:500px;
    background-color:#CF3;
}

#backgroundBottom
{
    height:100px;
    width:400px;
    background-color: #0FF;
}

#content
{
    /*Here's the magic*/
    position: relative;
    top: 15pt;
    /******************/
    height:80px;
    width:300px;
    background-color: #F00;
}

.center
{
    margin: 0 auto;
}

和小提琴：http: //jsfiddle.net/yBq2V/1/

于 2013-06-06T19:34:56.147 回答