如何使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