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

Question

我提交了一张图片，里面有一个徽章，里面有另一个徽章，我想知道他们是怎么做到的？

Answer 1

说明

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

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

最后一部分需要 CSS3 属性 transform 和 translate 属性。您可以在 CSS3 2D Transforms or transform | CSS-Tricks 中阅读更多相关信息。

我们将在这里使用transform: translate(50%, -50%)。第一个 50% 表示元素将向右偏移其宽度的一半，第二个 50% 表示元素将向上偏移其自身高度的一半。

如果您的徽章具有固定宽度 and/or 高度，您可以跳过这部分，并且只使用固定值。

例子

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>

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

How to create a badge inside another?

html

css

twitter-bootstrap

angular-ui-bootstrap

说明

例子