html - Bootstrap 按钮覆盖

Question

我正在尝试覆盖 2 个按钮(一个是圆形按钮，另一个是普通按钮)。这可以使用下面的 CSS 来实现。但是，我面临另一个没有响应的问题。我想连续添加 4 个按钮(2 个圆圈和 2 个普通按钮)。

还有放置在这些按钮之后的任何元素都没有正确定位。 IE。如果我在 div 中放置新文本，文本会覆盖在这些按钮上。

如何避免这种情况？以及如何使它响应？

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');


.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}

.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
  border-width: thick;
  background-color: darkgrey;
  color: white;
}


/*Image overlay*/

.container_row {
  position: relative;
}

.background-layer {
  position: absolute;
  z-index: 1;
  left: 50px;
  top: 10px;
  height: 50px;
}

.foreground-layer {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  height: 50px;
}

.btn-lg-overlay {
  width: 300px;
  height: 50px;
  border-color: lightgrey;
  border-width: 5px;
  background-color: darkgray;
}

<div class="container_row">
  <div class="foreground-layer">
    <button type="button" class="btn btn-default btn-circle btn-xl"><i class="glyphicon glyphicon-ok"></i></button>
  </div>
  <div class="background-layer">
    <button type="button" class="btn btn-default btn-lg btn-lg-overlay"><i>Requested</i></button>
  </div>
</div>

Answer 1

这似乎是绝对定位的问题。绝对定位的元素从文档流中移除，它们相对于页面上的其他元素定位。这意味着它们将对遵循此流程的其余元素“不可见”。

当你有包装器 div 时，在你的例子中是 container_row，它会根据遵循此文档流的内部元素的宽度和高度自动调整其宽度和高度.如果您绝对定位内部元素，在您的情况下 foreground-layer 和 background-layer 它们将不会遵循此流程，因此，包装器 div 将看不到它们，这意味着它的宽度和高度将自动设置为 0。

如果您尝试将两个按钮并排放置，您基本上是在尝试将两个宽度和高度为零的元素并排放置。这导致它们被放在同一个位置，使它们看起来像是重叠的。

解决此问题的一种方法是为包装元素添加特定的高度和宽度。

.container_row {
  position: relative;
  width: 350px;
  height: 70px;
}

如果您想将多个按钮并排放置，可以将它们 float 。

.container_row {
  position: relative;
  float: left;
  width: 350px;
  height: 70px;
}