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

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 >test</button>
    <span >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 ?

CodePudding user response：

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  data-number="3">test (showing)</button>
    <br>
    <button >test (hiding)</button>
</div>

CodePudding user response：

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 >
    <button >test</button>
    <span >3</span>
  </div>

You don't need the Javascript code for this.

CodePudding user response：

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 >
    <button >test</button>
    <span >3</span>
</div>