将div放在具有绝对位置的div下面

Question

我想制作一个带有图像的标题，即使缩小也会使用浏览器的整个宽度。直接在＃slider-wrapper下面包含图像是#main-content。但是这个div现在直接在#topheader之后提出，因为你可以看到什么表明我的问题。 div必须在＃slider-wrapper之后（因此），但因为＃slider-wrapper位于绝对位置，div＃main-content位于＃topheader之后。

如何在＃slider-wrapper之后定位#main-content？有没有其他方法使标题图像使用屏幕的整个宽度而不是绝对位置？请帮我这个，现在试试几个小时。

我第一次做了jsfiddle这不是100％正确，但我认为这样做。因此，即使在缩小后，标题图像也在使用整个屏幕，但我无法将#main-content定位好。非常感谢

https://jsfiddle.net/hj28fuw7/4/embedded/result/

https://jsfiddle.net/hj28fuw7/4/

Answer 1

如果我理解你的问题，我认为你需要做的是在#main-content上设置一个上边距到＃slider-wrapper的高度值。即。

变化：

#main-content {
    width: 1060px;
    margin: 0 auto;
    border: 1px solid #000000;  
}

为：

#main-content {
    width: 1060px;
    margin: 426px auto 0px auto;
    border: 1px solid #000000;
}