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

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上升,但也是内在的内容.
比将内容向下拉回相同数量的顶部填充将完成工作.