jquery - 将 div 扩展到父容器之外，同时将子 div 保留在容器内

Question

这似乎不是一个难题，但我想不出一个可行的解决方案。

我想要一个从页面左侧延伸到其父容器之外的 div(使用 Bootstrap 3，因此最大宽度为 1170 像素的容器)。在其中，我需要另一个居中容器，因此其中的文本和按钮不会超过 1170 像素。

这是我需要实现的屏幕截图:

http://postimg.org/image/3x9s5cnr1/

编辑:我认为我对我想要实现的目标没有尽可能清楚。文本后面的白色 div 的绝对定位只是为了让 div 延伸到容器之外到窗口的左侧，但这并不重要。目标只是将文本和按钮保持在居中的容器内，但文本和按钮周围的白色 div 延伸到窗口的左侧。我编辑了问题以使其更清楚一些。

无论如何，我想出了一个简单有效的方法。我刚刚使用:

margin-left: -9999px
padding-left: 9999px

在白色 div 上保持它向左扩展，而不使用绝对定位。它对我来说似乎仍然不“正确”，但工作正常。

Answer 1

设置子div为

div.parent {
position:absolute;
background:#ccc;
left:0;
height:100%;
width:100%;
}

div.child {
position: relative;
left: 25%;
background: #fff;
width: 50%;
height: 50%;
top: 25%;
}

<div class="parent">
  <div class="child">
  </div>
</div>

您必须根据自己的喜好调整高度/宽度并更改顶部/左侧的百分比。关键是在绝对容器中有一个相对容器