Bootstrap列越过另一个绝对位置的列元素

-1

我试图在使用位置绝对的引导列之间插入一个按钮。Bootstrap列越过另一个绝对位置的列元素

我的问题是，一旦我的按钮进入另一列，按钮将在列下方，而不是超过它。

我想实现 enter image description here

我有什么什么 enter image description here

我的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; 
}

来源

2016-02-05 Stralos

是否在你的按钮的css中添加'z-index：2;'解决这个问题？我有点不确定你有什么问题。 –

@Widget它确实解决了我的问题...对不起，我不知道这件事存在。谢谢。但出于好奇，有没有其他方法可以确保我的按钮位于顶部？ z-index感觉像是一个黑客。 – Stralos

将按钮放在主体之后是另一种方式。我会写出一个完整的答案。 –

Mozilla有a good write-up的东西放在彼此之上的顺序。这里有一个总结：

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

通常，在绝对定位事物时，如果想让代码保持语义上合理的顺序，您需要给它一个z-index才能显示正确。

来源

2016-02-05 21:07:51

Bootstrap列越过另一个绝对位置的列元素

回答

相关问题