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

Question

我提交了一张在另一个徽章内带有徽章的图像，我想弄清楚他们是怎么做到的？

Answer 1

解释

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

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

最后一部分将需要transform带有translate属性的 CSS3属性。您可以在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>