如何将div放在div上

Question

这就是我想要实现的目标。我尝试使用绝对位置，它似乎在一个屏幕尺寸上工作，但对其他人不起作用。

＆＃13;

＆＃13;

.countdown {
  width: 200px;
  background: #b02d1b;
  margin: 0;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  padding: 5px;
  position: absolute;
  z-index: 1;
}

.countdown-bg {
  width: 100%;
  border-top: solid 1px #ccc;
  position: absolute;
  margin: 12px;
}

＆＃13;

<div class="countdown"> Final Hours </div>
<div class="countdown-bg"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我想我的问题有一个解决方案：

＆＃13;

＆＃13;

.divOuter {
  background-color: #cccccc;
  width: 100%;
  height: 2px;
  position: absolute;
}

.divInner {
  background-color: #cc0000;
  width: 130px;
  height: 20px;
  position: relative;
  top: -12px;
  margin: 0 auto;
  color: #ffffff;
  text-align: center;
  font-family: Verdana;
  font-size: 0.8em;
  font-weight: bold;
  border-radius: 10px;
  border: 4px solid #ffffff;
}

＆＃13;

<div class="divOuter">
  <div class="divInner">FINAL HOURS!</div>
</div>

＆＃13;

＆＃13;

＆＃13;

简要说明：

我们有两个div，html中的第二个是第一个。 CSS中的此展示位置称为 float 。

当我们需要这种效果时，我们使用＆＃34;位置＆＃34; CSS的属性，其值为 Absotule 和 Relative 。

在这种情况下，第一个Div生成细线，第二个Div生成红色矩形。

＆＃34; top＆＃34;，＆＃34; left＆＃34;，＆＃34; right＆＃34;和＆＃34;按钮＆＃34; css的属性导致第二个Div相对于第一个对齐。和财产＆＃34;保证金：汽车＆＃34;导致内部div与外部div的中心对齐。

我希望我能帮助你！

Answer 2

没有flexbox

在另一个div中包含一个div。设置外部div position: relative和内部div position: absolute。使用left和transform

将内部div居中

.countdown {
  position: relative;
  border-top: solid 1px #ccc;
  margin: 15px 0;
}

.countdown>.content {
  width: 200px;
  text-align: center;
  background: #b02d1b;
  border-radius: 5px;
  color: #fff;
  padding: 5px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  text-transform: uppercase;
}

<div class="countdown">
  <div class="content">Final Hours!</div>
</div>

使用flexbox

使用flexbox的优势在于您无需设置位置，并且可以使用justify-content为中心。

.countdown {
  border-top: solid 1px #ccc;
  margin: 15px 0;
  display: flex;
  justify-content: center;
}

.countdown>.content {
  width: 200px;
  text-align: center;
  background: #b02d1b;
  border-radius: 5px;
  color: #fff;
  padding: 5px;
  transform: translateY(-50%);
  z-index: 1;
  text-transform: uppercase;
}

<div class="countdown">
  <div class="content">Final Hours!</div>
</div>