css分区定位问题

我有三个具有以下css的div：

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>

div#容器{
宽度：780px；
}
部门照片{
宽度：780px；
高度：300px；
}
分区内容{
位置：相对位置；
顶部：-106px；
宽度：780px；
}
照片在这里
内容在这里，但略高于照片层内容在这里，但略高于照片层内容在这里，但略高于照片层内容在这里，但略高于照片层内容在这里，但略高于照片层内容在这里，但略高于照片层内容在这里，但是稍微位于照片的顶部，层内容在这里，但是稍微位于照片的顶部，层内容在这里，但是稍微位于照片的顶部，层内容在这里，但是稍微位于照片的顶部，层内容在这里，但是稍微位于照片的顶部，层内容在这里，但是稍微位于照片的顶部，层内容在这里，但是稍微位于照片的顶部，层内容在这里，但是稍微位于照片的顶部，层内容在这里，但是稍微位于照片的顶部，层内容在这里，但是稍微位于照片的顶部，层内容在这里，但它稍微位于照片层的顶部

我的问题是，因为我已经将内容层设置为top:-106px，neith下有一个很大的间隙，当我希望“container”div在“content”div之后立即结束时。我尝试在“container”div上设置margin bottom:-106px，但这并没有改变“container”div的高度

“内容”分区将有不同的高度，因为它显然是用于文本等。是否有任何方法使这项工作

---

提前感谢：）

将您的集装箱舱高度设置为100%可能会有所帮助。您可以尝试的另一件事是在容器div上设置overflow属性。overflow:hidden或overflow:auto这两种方法都可以使容器div更好地“包装”其他div

---

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

将容器div上的高度设置为100%可能会有所帮助。您可以尝试的另一件事是在容器div上设置overflow属性。overflow:hidden或overflow:auto这两种方法都可以使容器div更好地“包装”其他div

---

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

产生这种差距的原因是相对定位不会移除最初为该元素创建的空间，即使您移动了它。尝试将其更改为“绝对”，看看这是否符合您的要求。

产生间隙的原因是相对定位不会删除最初为该元素创建的空间，即使您移动了它。尝试将其更改为“绝对”，看看这是否符合您的要求。

尝试将CSS更改为

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

}

div#容器{
宽度：780px；
位置：相对；尝试将CSS更改为

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

}

div#容器{
宽度：780px；
位置：相对；我建议不同的方法，绝对地定位你的图像，然后在容器上用上边距（或填充，如果你需要背景）向下推内容

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;
}

我建议采用不同的方法，绝对定位你的图像，然后在容器上用上边距（或填充，如果你需要背景）向下推内容

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;
}

不使用
位置：相对
和设置
顶部
，您可以通过设置负
边距顶部
，在没有空格的情况下实现相同的效果：

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

不使用
位置：相对
和设置
顶部
，您可以通过设置负
边距顶部
，在没有空格的情况下实现相同的效果：

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