2つのダイビングの間にボタンを置く方法は？

Question

私はCSSを使用して、このようなデザインにしたいが、私は2 div秒の間、トップにこのボタンを配置する方法がわからない、誰も私を助けることができますか？

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

Answer 1

ボタンのスタイルposition: absolute;を作成し、rightとtopまたはbottomプロパティを定義します。

スクロール中にボタンを固定したい場合、あなたはまた、あなたの要素をプルアップするために、負のmargin-topを使用することができます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

を設定します。