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

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 ?

javascripthtmlcss


Solution 1:[1]

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>

Solution 2:[2]

Just update your code as follows this should help you.

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

.qkb-bubble-btn {
  position: absolute;
  margin-top: 20px;
  background-color: #FF7756 !important;
}
<div class="container">
    <button class="qkb-bubble-btn">test</button>
    <span class="badge">3</span>
  </div>

You don't need the Javascript code for this.

Solution 3:[3]

The parent div should have position: relative and display: inline-block to relate the position and to give width equal to button.

.badge-wrapper{
  position: relative;
  margin-top: 100px;
  display: inline-block
}
.badge {
  position: absolute;
  padding: 5px 10px;
  border-radius: 50%;
  background: red;
  color: white;
  right: -20px;
  top: -20px;
}

.qkb-bubble-btn {
  
  background-color: #FF7756 !important;
  
}
<div class="badge-wrapper">
    <button class="qkb-bubble-btn">test</button>
    <span class="badge">3</span>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 poo
Solution 3

Related Questions