Question

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

以及在这些按钮未正确定位后放置的任何元素。即如果我在div中放置一个新文本，文本将叠加在这些按钮上。

我该如何避免这种情况？我怎样才能做出这种反应？

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

Answer 1

这似乎是绝对定位的问题。绝对定位的元素将从文档流中删除，它们相对于页面上的其他元素定位。这意味着它们将对此流程后面的其他元素“隐形”。

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

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

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

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

如果你想把多个按钮放在一起，你可以漂浮它们。

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

Answer 2

由于元素width: 300px的{{1}}因此而无响应。另外是隐藏在圆圈后面的文字，你应该从左边提供一些.btn-lg-overlay

Answer 3

@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>

<br><br><br><br>
<p>TEXT.........MORE TEXT</p>

Boostrap按钮覆盖

3 个答案: