尝试将自举程序按钮带到该部分的右下角，但是却将其带到了该部分之外。为什么？

Question

因此，这有点令人困惑。

.features {
  margin-top: 10px;
  min-height: 400px;
  border: 1px solid #8C8C8C;
  border-radius: 7px;
  color: #4A4A4A;
  overflow: hidden;
}
.bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="features">

  <p class='new-question'>Placeholder text</p>

  <div class='row'>
    <div class='bottom-right'>

      <button type='button' class='btn btn-primary btn-large btn-start'>Start</button>
      <button type='button' class='btn btn-primary btn-large btn-skip'>Skip</button>

    </div>
  </div>

</section>

我只希望按钮在功能部分的右下方连续显示。但是他们没有这样做，而是完全超越了本节。有什么想法吗？

这就是现在的样子（忽略文本，我用js生成了它）：

Answer 1

添加position: relative到.features。每当您要position: absolute根据父级移动子元素时，position: relative都需要添加到父级。

对于绝对位置：

元素相对于其第一个定位（非静态）祖先元素定位

.features {
  margin-top: 10px;
  min-height: 400px;
  border: 1px solid #8C8C8C;
  border-radius: 7px;
  color: #4A4A4A;
  overflow: hidden;
  position: relative;
}

.bottom-right{
  position: absolute;
  bottom: 0;
  right: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="features">

  <p class = 'new-question'> Placeholder text</p>
  <div class = 'bottom-right'>
    <button type='button' class='btn btn-primary btn-large btn-start'>Start</button>
    <button type='button' class='btn btn-primary btn-large btn-skip'>Skip</button>
  </div>
</section>