如何使浮动动作按钮/内容在 MaterializeCSS 中重叠两个 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

这是一个

非常流行的效果:)

我们使用图像的负边距和标题的有限填充来做到这一点......

.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>

网页 - 图片

<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 的代码笔