css - 将主要内容移到标题照片上

Question

此处设计问题。我怎样才能让#main-wrapper 在下一页的#single-carousel 上滑动:http://duijnisveld.wpengine.com/

现在它在滚动时向上移动，我需要旋转木马保持原样，并在向下滚动时让主包装器滑过它。

给出 .header-foto-wrapper position: fixed 和 #main-wrapper position: relative 给出对我来说是意想不到的行为，我显然错过了一些重要的东西。

*注意，在 url 中，.header-foto-wrapper 没有固定位置，因为它破坏了布局，它是供客户查看的实时站点。

谢谢!

Answer 1

您需要应用宽度。当您将容器从内容流中拉出时，当容器计算宽度时，事情会变得有点不稳定。 width:100% 将填满页面宽度。您还需要将内容区域向下移动并应用背景颜色。

.header-foto-wrapper {
  position: fixed;
  width: 100%;
}

#main-wrapper {
  position: relative;
  top: 100%;
  background: #fff;
}