html - Div Attached to side of wrapper -

i trying add div side of wrapper. link / button.

i want able slide , down, fixed right hand side border when scrolling.

the button is:

#booknow { position: absolute; right: 0; margin-left:25px; text-align:center; font-family: 'raleway',sans-serif; font-size:22px; color:#ffffff!important; font-weight:700; line-height:26px!important; text-transform:uppercase; } 

and inner wrapper (where border is), is:

.wrapper_inner{ position:relative; z-index:10!important; padding:30px!important;  background:#fff!important; border:1px solid #d4d4d4!important; } 

html:

<div class="wrapper">   <div class="wrapper_inner">     <div id="booknow">       <a href="booknow"> book <br> </a>     </div>    </div> </div> 

at minute have this:

if set fixed slides , down won't position outside of .wrapper_inner.

the html wasn't helpful, threw together. color scheme display elements. removed .inner_wrapper , added surrounding layout possible demonstrate #booknow floats. if click #booknow it'll scroll down faux form @ bottom.

demo: https://plnkr.co/edit/qacqw4o4rjn7yhoprwly?p=preview

full screen: https://run.plnkr.co/njw73aiiiuhxeoom/

relevant css

body {   position: relative;   overflow-y: scroll;   overflow-x:hidden;   font: 500 16px/1.4 'arial';   min-height: 100vh;  }  .spacer {   position: absolute;   bottom: -200px;   height: 60%; }  #booknow {   position: fixed;   top: 30px;   right: 0;   float: right;   margin-left: 25px;   text-align: center;   font-family: 'raleway', sans-serif;   font-size: 22px;   color: #ffffff;   font-weight: 700;   line-height: 26px;   font-variant: small-caps;   z-index: 10;   background: #fc3;   padding: 10px;   width: 50px; }  .wrapper {   position: absolute;   top: -110px;   margin: 25px;   padding: 5px 10px;   width: 100%;   border: 3px double grey;   min-height: 70px;   background: #eff999; }