如何在两次潜水之间放置一个按钮？ [英] how to put a button on top between two dives?

问题描述

我想用css做一个像这样的设计，但我不知道如何把这个按钮位于两个 div s之间的顶部，任何人都可以帮助我？

I want to make a design like this using css, but i don't know how to put this button on top between two divs, can anyone help me?

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

推荐答案

制作按钮样式位置：绝对值; 并定义右边和顶部或底部属性。

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>

这篇关于如何在两次潜水之间放置一个按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！