代码之家 › 专栏 › 技术社区 › spjy

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

floating-action-button materialize overlap html

1

spjy · 技术社区 · 10 年前

我正在查看MaterializeCSS展示(MaterializeCSS.com/showcase.html),我看到了一个我想整合到我的网站中的功能。我想让一张卡片、图片、按钮等能够重叠在两个div(或部分)上。

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

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

只是澄清一下,我想知道如何使用MaterializeCSS框架(MaterializeCSS.com)实现这一点。

谢谢此外,我不能发布两个以上的链接,所以我必须打破它们(对不起D:)!

1 回复 | 直到 10 年前

1

5

shramee 10 年前

这是一个非常流行的效果:)

我们用图像的负边距和页眉的等效填充。。。

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