Check out this example with animated count changes:

http://jsfiddle.net/rahilsondhi/FdmHf/4/

<ul>
<li class="notification-container">
    <i class="icon-globe"></i>
    <span class="notification-counter">1</span>
</li>

    .notification-container {
    position: relative;
    width: 16px;
    height: 16px;
    top: 15px;
    left: 15px;

    i {
        color: #fff;
    }
}

.notification-counter {   
    position: absolute;
    top: -2px;
    left: 12px;

    background-color: rgba(212, 19, 13, 1);
    color: #fff;
    border-radius: 3px;
    padding: 1px 3px;
    font: 8px Verdana;
}




$counter
.css({opacity: 0})
.text(val)
.css({top: '-10px'})
.transition({top: '-2px', opacity: 1})

Animate Count Change using jQuery:

$('button').click(function()
{
    var $counter = $('.notification-counter')
    var val = parseInt($counter.text());
    val++;
    $counter.css({opacity: 0}).text(val).css({top:'-10px'}).animate({top: '-1px', opacity: 1}, 500);
});

This code snippet utilizes Font Awesome for the globe icon and jQuery Transit for the animation effects.

A creative concept using font-relative sizing and shaping

https://i.sstatic.net/EhtIr.png

The image above showcases the execution of the Live Demo below. Take a look and experiment on your own. Explore further down to see a demonstration of the current preferred solution.

As mentioned in other responses, absolute positioning alongside a relatively positioned parent proves to be a dependable method for placing the indicator in the upper right corner (or any desired corner).

However, there are several crucial considerations as follows:

1. Size: not just in relation to what it represents, but also considering potential issues if the number becomes lengthy.
2. Shape: ideally circular, but how do we ensure this with long numbers?
3. Floating appearance: It should give the impression of floating above the corner instead of being internal.
4. Border: optionally, depending on color schemes, a subtle border or shadow may be necessary.
5. Accessibility: ensuring proper tagging of the notification for visually impaired users.

Implementing the above using px units, as done in the approved response, can lead to complexities, fragility, and an unresponsive design.

The CSS provided below addresses all the aforementioned concerns in an elegant and responsive manner:

.notification {

  /* circle shape, size and position */
  position: absolute;
  right: -0.7em;
  top: -0.7em;
  min-width: 1.6em; /* or width, explained below. */
  height: 1.6em;
  border-radius: 0.8em; /* or 50%, explained below. */
  border: 0.05em solid white;
  background-color: red;

  /* number size and position */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8em;
  color: white;
}

Key points to note:

1. An element with the .notification class will be displayed in the upper-right corner of the containing element.

   For instance, it will appear in the top right corner of this mailbox button:

   <button class="mailbox">📥 Inbox
       <div class="notification" role="status">42</div>
   </button>

   If its placement seems off, troubleshoot by utilizing your browser's developer tools to inspect the actual boundaries of the parent element.

2. To maintain the indicator as a circle regardless of count size, switch min-width to width and set border-radius to 50%. The CSS provided is intended to expand horizontally if the count grows large, similar to many people's overflowing inboxes 🤣.

3. For accessibility purposes, include role="status" on the notification element, showcased above.

Live Experiment

Take part in a live demo paired with a slider that allows you to witness its response to changes in font size:

/* IGNORE this Javascript section. 
   It exists solely for adjusting the size with
   a slider. Hit Run and test it out.                  */

var boxes = document.getElementsByClassName("mailbox");

function updateFontSize(size) {
  for (var i = 0; i < boxes.length; i++) {
    boxes[i].style.fontSize = size + "px";
  }
}

var px = getComputedStyle(boxes[0]).fontSize

var label = document.getElementById("label");
label.innerHTML = px

var slider = document.getElementById('slider');
slider.value = px.slice(0, -2)
slider.onchange = () => {
  label.innerHTML = slider.value + "px";
  updateFontSize(slider.value);
}

.mailbox {
  position: relative;
  font-size: 16px;
  line-height: 2.5em;
  margin: 0.3em;
}

.notification {
  /* circle shape, size and position */
  position: absolute;
  right: -0.7em;
  top: -0.7em;
  min-width: 1.6em; /* or width, explained below. */
  height: 1.6em;
  border-radius: 0.8em; /* or 50%, explained below. */
  border: 0.05em solid white;
  background-color: red;

  /* number size and position */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8em;
  color: white;
}

<p>Font size:
  <span id="label">16</span>
  <input id="slider" type="range" min="6" max="66" step="1" value="16"></p>

<button class="mailbox">📨 Unread
    <div class="notification" role="status">3</div>
</button>
<button class="mailbox">📥 Inbox
    <div class="notification" role="status">42</div>
</button>
<button class="mailbox">🗑 Junk
    <div class="notification" role="status">1630</div>
</button>

Contrasting the endorsed answer:

To observe the variance, engage in this live demonstration of the accepted answer's methodology:

var boxes = document.getElementsByClassName("mailbox");

function updateFontSize(size) {
  for (var i = 0; i < boxes.length; i++) {
    boxes[i].style.fontSize = size + "px";
  }
}

var px = getComputedStyle(boxes[0]).fontSize

var label = document.getElementById("label");
label.innerHTML = px

var slider = document.getElementById('slider');
slider.value = px.slice(0, -2)
slider.onchange = () => {
  label.innerHTML = slider.value + "px";
  updateFontSize(slider.value);
}

.mailbox {
  display: inline-block;
  position: relative;
  padding: 10px 10px;
  font-size: 16px;
}

.notification {
  background-color: #fa3e3e;
  border-radius: 2px;
  color: white;
  padding: 1px 3px;
  font-size: 10px;
  position: absolute;
  top: 0;
  right: 0;
}

<p>Font size:
  <span id="label">16</span>
  <input id="slider" type="range" min="6" max="66" step="1" value="16"></p>

<button class="mailbox">📨 Unread
    <div class="notification" role="status">3</div>
</button>
<button class="mailbox">📥 Inbox
    <div class="notification" role="status">42</div>
</button>
<button class="mailbox">🗑 Junk
    <div class="notification" role="status">1630</div>
</button>

Most likely using absolute positioning:

<div id="globe" style="height: 30px; width: 30px; position: relative;">
 <img src="/globe.gif" />
 <div id="notification" style="position: absolute; top: 0; right: 0;">1</div>
</div>

Similar to this setup. It is recommended to customize the details and consider using background images. The key is the use of absolute positioning, which has shown consistency across different browsers in my own experience.

Example Code:

<div id="ContainerDiv">
    <div id="MainImageDiv"> //Insert the image here or any desired content </div>
    <div id="NotificationDiv"> </div>
</div>

Styling:

#NotificationDiv {
    position: absolute;
    left: -10 //use negative values to move it above the #MainImageDiv
    top: -4 
    ...
}

I have full confidence in the accuracy of the answers provided regarding absolute positioning. In order to test this, I decided to create a solution using only SVG. The outcome is not perfect, and I am curious if there is a more elegant approach to solving a similar SVG puzzle. :)

http://jsfiddle.net/gLdsco5p/3/

<svg width="64" height="64" viewBox="0 0 91 91">
    <rect id="Artboard1" x="0" y="0" width="90.326" height="90.326" style="fill:none;"/>
    <g id="Artboard11" serif:id="Artboard1">
        <g id="user-circle-o" transform="matrix(2.69327,0,0,2.69327,7.45723,7.45723)">
            <path d="M14,0C21.734,0 28,6.266 28,14C28,21.688 21.766,28 14,28C6.25,28 0,21.703 0,14C0,6.266 6.266,0 14,0ZM23.672,21.109C25.125,19.109 26,16.656 26,14C26,7.391 20.609,2 14,2C7.391,2 2,7.391 2,14C2,16.656 2.875,19.109 4.328,21.109C4.89,18.312 6.25,16 9.109,16C10.375,17.234 12.093,18 14,18C15.907,18 17.625,17.234 18.891,16C21.75,16 23.11,18.312 23.672,21.109ZM20,11C20,7.687 17.312,5 14,5C10.688,5 8,7.688 8,11C8,14.312 10.688,17 14,17C17.312,17 20,14.312 20,11Z" style="fill:rgb(190,190,190);fill-rule:nonzero;"/>
        </g>
        <g transform="matrix(1,0,0,1,1.36156,0)">
            <circle cx="63.708" cy="18.994" r="9.549" style="fill:rgb(255,0,0);"/>
        </g>
        <g transform="matrix(1.66713,0,0,1.66713,-51.5278,-2.33264)">
            <text  id="counter" x="68.034px" y="15.637px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:7.915px;fill:white;">1</text>
        </g>
    </g>
</svg>