如何使MaterialiseCSS中的浮动操作按钮/内容重叠两个div

Question

我在查看MaterializeCSS展示（materializecss.com/showcase.html），并且看到了一个我想要合并到我的网站中的功能。我想能够使卡，图片，按钮等能够重叠在两个div（或部分​​）上。

例如： http://prntscr.com/bezcgo或http://prntscr.com/bezd7s或prntscr.com/bezdvx

显然图片是从实际运行的网站不同，但有，我一直在寻找同样的想法。在第一张图片中，“hyperAPI”图片与蓝色和白色部分重叠。对于第二张照片，黄色的向下箭头与蓝色和白色重叠。第三，红色向下箭头重叠浅蓝色和白色区域。

只是澄清，我想知道如何使用MaterializeCSS框架（materializecss.com）来做到这一点。

谢谢！此外，我不能发布超过两个链接，所以我不得不打破他们（对不起D :)！

Answer 1

这是一个非常受欢迎的效果:)

我们用图像和头部eqiuvalent填充负利润率做到这一点...

CSS

.overlap-header { 
    padding: 25px 25px 125px; /* Bottom padding has extra 100px */ 
    text-align: center; 
    background: #333; 
    color: #fff; 
    position: relative; 
} 
.half-out-button { 
    position: absolute; 
    bottom: 0; 
    right: 5%; 
    height: 70px; 
    width: 70px; 
    border-radius: 50%; 
    margin-bottom: -35px; /* Change this as you like */ 
} 
.overlap-img { 
    position: relative; 
    display: block; 
    max-width: 80%; 
    margin: -100px auto 25px; /* top margin is -100px */ 
} 

HTML - 按钮

<div class="overlap-header"> 
    <h1>Awesome overlapping</h1> 
    <button class="half-out-button"> Half out! </button> 
</div> 

HTML - 图片

<div class="overlap-header"> 
    <h1>Awesome overlapping</h1> 
</div> 
<img src="https://pixabay.com/static/uploads/photo/2016/04/25/23/53/euro-1353420_960_720.jpg" class="overlap-img"> 

下面是该http://codepen.io/shramee/pen/zBreLN