How to create a badge inside another?

Question

I have submiited an image with a badge inside another badge and i am trying to figure out how they did it?

Answer 1

Explanation

In order to achieve the desired behavior, use the property position: relative in your wrapper element and use position: absolute in the child element.

Then position the child element in the top/right corner with top: 0 and right: 0.

The last part will require the CSS3 property transform with the translate attribute. You can read more about it in CSS3 2D Transforms or transform | CSS-Tricks.

We will use transform: translate(50%, -50%) here. The first 50% means that the element will be dislocated half it's own width to the right, and the second 50% means that the element will be dislocated half it's own height up.

You could skip this part if your badge has a fixed width and/or height, and just use a fixed value.

Example

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>