将图像重叠到另一个部分，同时将内容推出

Question

目前：http://jsfiddle.net/nmd1abot/

期望：http://i.imgur.com/64wPw7W.jpg

基本结构

Section
    Header
    Body
    Graphic
Section
    Header
    Body

我需要帮助让图形重叠到灰色部分，同时更多地按下第二部分的标题。

是否有解决方案不涉及手动设置第二部分的填充？

我构建的许多其他页面可能会使用此设计，但图像大小未标准化。

Answer 1

http://jsfiddle.net/nmd1abot/2/

只需添加

margin-top: -50px; 
padding-top: 50px;

到.two

因此，基本上负余量顶部会推动.two，但也会推动内部内容。
而不是将内容拉回到相同数量的顶部填充将完成工作。