如何使浮动操作按钮/内容与 MaterializeCSS 中的两个 div 重叠
How to make Floating Action Button / Content overlap two divs in MaterializeCSS
我正在查看 MaterializeCSS 展示柜 (materializecss.com/showcase.html),我看到了一个我想合并到我的网站中的功能。我希望能够使卡片、图片、按钮等能够重叠在两个 div(或部分)上。
例如:
http://prntscr.com/bezcgo or http://prntscr.com/bezd7s 或 prntscr.com/bezdvx
貌似和live网站的图片不一样,但是和我找的思路是一样的。在第一张图片中,"hyperAPI" 图片同时覆盖了蓝色和白色部分。对于第二张图片,黄色向下箭头与蓝色和白色重叠。第三,红色向下箭头与浅蓝色和白色区域重叠。
澄清一下,我想知道如何使用 MaterializeCSS 框架 (materializecss.com) 来做到这一点。
谢谢!另外,我不能 post 超过两个链接所以我不得不打破它们(抱歉 D:)!
这是一个很受欢迎的效果:)
我们使用图像的负边距和 header...
的等效填充来实现
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">
我正在查看 MaterializeCSS 展示柜 (materializecss.com/showcase.html),我看到了一个我想合并到我的网站中的功能。我希望能够使卡片、图片、按钮等能够重叠在两个 div(或部分)上。
例如: http://prntscr.com/bezcgo or http://prntscr.com/bezd7s 或 prntscr.com/bezdvx
貌似和live网站的图片不一样,但是和我找的思路是一样的。在第一张图片中,"hyperAPI" 图片同时覆盖了蓝色和白色部分。对于第二张图片,黄色向下箭头与蓝色和白色重叠。第三,红色向下箭头与浅蓝色和白色区域重叠。
澄清一下,我想知道如何使用 MaterializeCSS 框架 (materializecss.com) 来做到这一点。
谢谢!另外,我不能 post 超过两个链接所以我不得不打破它们(抱歉 D:)!
这是一个很受欢迎的效果:)
我们使用图像的负边距和 header...
的等效填充来实现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">