如何在另一个内部创建徽章？

Question

我已经在另一个徽章里面贴了一张带徽章的图片，我想知道他们是怎么做到的？

Answer 1

解释

为了实现所需的行为，请在包装器元素中使用属性position: relative，并在子元素中使用position: absolute。

然后使用top: 0和right: 0将子元素放在右上角。

最后一部分需要具有transform属性的CSS3属性translate。您可以在CSS3 2D Transforms或transform | CSS-Tricks中详细了解相关信息。

我们将在此处使用transform: translate(50%, -50%)。第一个50%表示该元素将自己的宽度向右移动一半，而第二个50%表示该元素将在其自身高度的一半处脱臼。

如果您的徽章具有固定的宽度和/或高度，您可以跳过此部分，只需使用固定值。

实施例

body {
  margin: 25px
}
.outter-badge {
  position: relative;
  margin: 10px;
}
.inner-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">

<div class="badge outter-badge">badge
  <div class="badge inner-badge">1</div>
</div>

<div class="badge outter-badge">primary label
  <div class="label label-primary inner-badge">1</div>
</div>

<div class="badge outter-badge">success label
  <div class="label label-success inner-badge">1</div>
</div>

<div class="badge outter-badge">warning label
  <div class="label label-warning inner-badge">1</div>
</div>

<div class="badge outter-badge">danger label
  <div class="label label-danger inner-badge">1</div>
</div>

<div class="badge outter-badge">info label
  <div class="label label-info inner-badge">1</div>
</div>