Fixate divs to other divs when changing window size

Problem is that the speech bubbles are only fixated to the tabs for a certain width of the browser: enter image description here

See here to try out yourself.

Relevant code is

<ion-tabs class="tabs-icon-top tabs-positive">
  <div class="bubble-bar-tabs">
    <div class="b-home"></div>
    <div class="b-about"></div>
    <div class="b-cont"></div>
  </div>
  <ion-tab title="Home" icon="ion-home" href="#/tab/home">
    <ion-nav-view name="home-tab"></ion-nav-view>
  </ion-tab>
  <ion-tab>...
  <ion-tab>...
</ion-tabs>

with 

.bubble-bar-tabs {
    position: absolute;
}

.b-home {
    display: block; 
    line-height: normal;
    z-index: 1000;
    position: absolute;
    left: 3rem;
    top: -75px;
    width: 219px;
    height: 70px;
}

How to fix the alignment of the speech bubbles to the tabs for all browser windows sizes/screen sizes? Thank you.

You should try using percentages on values with width and height instead of pixels because the a percent value is dependent upon screen size and the element that contains it. So for your css code I would suggest should look like this:

.b-home {
display: block; 
line-height: normal;
z-index: 1000;
position: absolute;
left: 3rem;
top: -75px;
width: 33%;
height: 70px;
}

The width percentage value would enable you to keep the bubbles at certain screen sizes. Also I would suggest making a margin that way the bubbles do not interfere with one another.

For mobile devices you need to implement the @media screen to enable custom css for mobile devices. An example of this would be:

@media screen and (max-width: 600px) {
 .aClassforSmallScreens {
      clear: both;
  font-size: 1.3em;
 }
}

Your problem is based on your HTML Structure.

each <div class="b-home"></div> shall be a son of a <ion-tab title=... element.

Then change your CSS with 

.b-home {
    display: block; 
    line-height: normal;
    z-index: 1000;
    position: absolute;
    left: 50%; // here you specify that the start of the bubble is 50% from left, adapt it to your need
    **top: -5px;** // Here, you specify that your content is 5 pexel HIGHER than the top
    width: 219px; 
    height: 70px;
}

Moreover, concerning width and height, Having a fix width a height will resolve of content overlapping other content when page change size. Much better use a % to addapt to page height & width.