html - Bootstrap column goes over another column element that has position absolute -

i'm trying put button in between bootstrap columns using position absolute.

my problem once button enters column, button goes under column instead going on it.

what want achieve

what have

my html code:

<div class="container-fluid">   <div class="row">     <div class="col-xs-12 col-sm-3">       <ol>         <li>           option            <button class="btn btn-default feedback-option--feedback-button">pressme</button>         </li>         <li>           option            <button class="btn btn-default feedback-option--feedback-button">pressme</button>         </li>         <li>           option            <button class="btn btn-default feedback-option--feedback-button">pressme</button>         </li>       </ol>     </div>     <div class="hidden-xs   col-sm-9">       main body     </div>   </div> </div>                     

my css

.feedback-body--main-content {   background-color: #003b59; } .feedback-sidebar--main-content {   background-color: red; } .global--row-no-padding [class*="col-"] {   padding-left: 0 !important;   padding-right: 0 !important; } .feedback-option--feedback-button {   position: absolute;   top: -10px;   right: -30px; } .feedback-option-content {   position: relative;   list-style-type: none; } 

mozilla has a write-up of order in things put on top of each other. here's summary:

• elements appear first in markup go under appear later.
• within each context (generally whole page), can specify order things stack z-index. higher numbers on top of smaller numbers.

usually when absolutely positioning things you'll need give z-index show right, assuming you'd keep code in semantically sensible order.