How to keep an element relative to an other one at the same level?

Issue

I have two elements, and I want the second one to stick to the first one, so when the screen size is changing, the second element keep the same position from the first one.

var bubbleBtn = document.getElementsByClassName('qkb-bubble-btn ')[0];
var badge = document.getElementsByClassName('badge ')[0];
var rect = bubbleBtn.getBoundingClientRect();

badge.style.left = (rect.left+30)+'px';
badge.style.top = (rect.top-20) +'px';

.badge {
  position: absolute;
  padding: 5px 10px;
  border-radius: 50%;
  background: red;
  color: white;
}

.qkb-bubble-btn {
  margin-top: 100px;
  background-color: #FF7756 !important;
}

  <div>
    <button class="qkb-bubble-btn">test</button>
    <span class="badge">3</span>
  </div>

I don't know how to show my problem in the snippet but basically the whole app is reponsive so the bubble button is moving when the screen is resized and I want the badge to always be at this position from the button.

Is it possible only using CSS ? or should I trigger my JS code everytime the screen is resized ?

Solution

In your position I'd prefer to go css only setting the button position to relative and adding a css rule defining an :after element being your icon positioned absolute.

The side effect is that the content will need to be set the css way.

In this new edited demo I added the chance to specificy content addressing the attribute data-number and added a class to the rule so that it will show the bubble only if such class is present.

.qkb-bubble-btn {
  position: relative;
  background-color: #FF7756 !important;
}

.qkb-bubble-btn.showbubble:after {  
  position: absolute;
  right:-25px;
  top:-20px;
  content: attr(data-number);
  
  padding: 5px 10px;
  border-radius: 50%;
  background: red;
  color: white;
}

<div style="padding: 25px;">
    <button class="qkb-bubble-btn showbubble" data-number="3">test (showing)</button>
    <br>
    <button class="qkb-bubble-btn">test (hiding)</button>
</div>

Answered By - Diego De Vita