Bootstrap列遍历另一个具有绝对位置的列元素

Question

我正在尝试使用绝对位置在bootstrap列之间放置一个按钮。

我的问题是，一旦我的按钮进入另一列，按钮就会在列下面而不是越过它。

我想要实现的目标

我有什么

我的Html代码：

<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>                    

我的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有a good write-up的顺序，在这些顺序中，事物彼此叠加。以下是摘要：

• 标记中首先出现的元素将在稍后出现的元素下。
• 在每个上下文（通常只是整个页面）中，您可以指定事物与z-index堆叠的顺序。较高的数字会在较小的数字之上。

通常在绝对定位的时候你需要为它显示正确的z-index，假设你想让你的代码保持语义合理的顺序。