本文介绍了如何在两次潜水之间将按钮放在顶部?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!
问题描述
我想用 css 做一个这样的设计,但我不知道如何把这个按钮放在两个 div
之间,谁能帮帮我?
I want to make a design like this using css, but i don't know how to put this button on top between two div
s, can anyone help me?
<div></div>
button
<div></div>
推荐答案
制作按钮样式position: absolute;
并定义right
和top
或 bottom
属性.
Make the button style position: absolute;
and define the right
and top
or bottom
properties.
如果您希望按钮在滚动时固定,请设置 position: fixed;
If you want the button to be fixed while scrolling, set position: fixed;
#up{
background-color:#B7005D;
height:10vh;
width:100%;
}
#middle{
background-color:#E0E1E0;
height:40vh;
width:100%;
}
#floating-button{
width: 50px;
height: 50px;
border-radius: 50%;
background: #B7005D;
position: fixed;
top: calc(50% - 25px);
right: 30px;
cursor: pointer;
box-shadow: 0px 2px 5px #666;
}
<div id="up"></div>
<div id="middle"></div>
<div id="floating-button"></div>
这篇关于如何在两次潜水之间将按钮放在顶部?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!