Show badge at the edge of a button [closed]

There are 'n' ways to do what you want, what I consider to be 'clean' and simple handling / maintenance is to have these rules defined:

.badge-button {
  position: relative
}

.badge-button:after {
  /* O conteúdo exibido será o valor definido no atributo 'data-badge'. */
  content: attr(data-badge);
  position: absolute;
  top:   -8px;
  right: -10px
}

/**
 * Técnica para esconder o conteúdo :after caso o atributo
 * 'data-badge' seja vazio. 
 */
.badge-button[data-badge='']:after {
  display: none
}

And in your HTML, the button (or whatever element) has the attribute custom data-badge :

<button class='badge-button' data-badge='10'>mensagens</button>

Since you are using jQuery, you can use data() to manipulate the attribute and change its value.

The rules above already make it stay in the position you would like - by the "configure" you used in the question, I considered the problem was the positioning. But here's an example with a better look by applying these properties:

.badge-button {
    position: relative;
    border: 2px solid #3498db;
    background-color: #fff;
    color: #3498db;
    padding: 4px 10px;
    outline: 0
}

.badge-button:after {
    content: attr(data-badge);
    position: absolute;
    top: -8px;
    right: -10px;
    background: #34495e;
    color: #fff;
    padding: 5px;
    border-radius: 50%;
    font-size: .8em
}

<button class='badge-button' data-badge='10'>notificações</button>