如何在两次潜水之间放置一个按钮？

Question

我想使用css制作这样的设计，但我不知道如何将这个按钮置于两个div之间，有人可以帮助我吗？

<div></div>
button
<div></div>

Answer 1

制作按钮样式position: absolute;并定义right和top或bottom属性。

如果您希望在滚动时修复按钮，请设置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>

Answer 2

您还可以使用否定margin-top来提升元素。