CSS DIV定位问题

Question

我有三个的div如下CSS：

div#container { 
    width: 780px; 
} 
div#photos { 
    width: 780px; 
    height: 300px; 
} 
div#content { 
    position: relative; 
    top: -106px; 
    width: 780px; 
} 


<div id="container"> 
    <div id="photos">photos are here</div> 
    <div id="content">content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer</div> 
</div> 

我的问题是，因为我已经设置内容层是顶：-106px有很大的差距underneith，当我想“容器”div在“content”div后立即结束。我试图在“容器”div上设置margin-bottom：-106px，但这并没有改变“容器”div的高度。

“content”div的高度显然是不同的，等等。有什么办法让这项工作？

在此先感谢:)

Answer 1

我建议不同的方法，是绝对定位你的图像，然后对容器按内容来与顶边（或填充如果你需要的背景）。

div#container { 
    width: 780px; 
    margin-top:106px; 
} 
div#photos { 
    width: 780px; 
    height: 300px; 
    position:absolute; 
    top:0; 
    z-index:50; 
} 
div#content { 
    position: relative; 
    width: 780px; 
    z-index:100; 
} 

Answer 2

将您的容器div的高度设置为100％可能会有所帮助。您可以尝试的另一件事是在您的容器div上设置overflow属性。溢出：隐藏或溢出：自动都会让你的容器div有时更好地“包装”你的其他divs。

请记住，您的浏览器里程会有所不同。

Answer 3

差距的原因是相对定位不会删除原来为该元素创建的空间，即使您将其移动。尝试将其更改为“绝对”，然后查看它是否符合您的要求。

Answer 4

试着改变你的CSS来

div#container { 
width: 780px; 
position:relative; <--------------- 
} 
div#photos { 
width: 780px; 
height: 300px; 
background: #aaaaaa; 
} 
div#content { 
    position:absolute; <------------ 
    top: 106px;  <------------ 
    width: 780px; 

} 

Answer 5

而不是使用position: relative和设置top的，你可以通过设置一个负margin-top实现无空间相同的效果：

div#content { 
    margin-top: -106px; 
    width: 780px; 
}