how to put a button on top between two dives?

问题:

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>

回答1:

You can also use negative margin-top to pull your element up.

回答2:

Make the button style position: absolute; and define the right and top or bottom properties.

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>