Css 更改窗口大小时将div固定到其他div

问题是语音气泡仅固定在浏览器某一宽度的选项卡上：

看看你自己试试吧

相关代码为

<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>

---

如何将语音气泡与所有浏览器窗口大小/屏幕大小的选项卡对齐？谢谢。

您应该尝试对宽度和高度的值使用百分比，而不是像素，因为a百分比值取决于屏幕大小和包含它的元素。因此，对于您的css代码，我建议如下所示：

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

宽度百分比值将使您能够将气泡保持在特定的屏幕大小。我还建议留出一个余量，这样泡沫就不会相互干扰

对于移动设备，您需要实现

@媒体屏幕

，以便为移动设备启用自定义css。这方面的一个例子是：

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

---

您的问题基于您的HTML结构

---

每个

都应该是一个

的儿子。你能相应地调整吗？我曾尝试在codepen上实现它，但实际上我的解决方案不起作用，因为没有显示选项卡。因此，您能否提供更多信息：-是否希望所有3个选项卡同时可见？
@media screen and (max-width: 600px) {
 .aClassforSmallScreens {
      clear: both;
  font-size: 1.3em;
 }
}

.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;
}