增强说唱按钮叠加层

Question

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

以及放置在这些按钮之后的任何元素都未正确定位。 即，如果我在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;
}

如果要将多个按钮并排放置，可以浮动它们。

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

Answer 2

由于给定元素.btn-lg-overlaywidth: 300px，因此没有响应 .另外，隐藏在圆圈后面的文字应该从左边给一些padding or margin

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>