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

Question

I'm trying to put a button in between bootstrap columns using position absolute.
My problem is that once my button enters another column, the button goes under the column instead going over it.
What I want to Achieve
What I 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;
}

Answer 1

Mozilla has a good write-up of the order in which things are put on top of each other. Here's a summary:
Elements that appear first in the markup go under those that appear later.
Within each context (generally just the whole page), you can specify what order things stack with a z-index. Higher numbers are on top of smaller numbers.
Usually when absolutely positioning things you'll need to give it a z-index for it to show up right, assuming you'd like to keep your code in a semantically sensible order.