Ionic/Angular ion-tabs样式问题：如何隐藏容器实现ion-tab-button悬浮

解决方案 #

问题本质是两个原因共同导致：

1. ion-tabs组件默认会为内部的tab内容区域预留底部内边距用来容纳tab bar，所以哪怕你把ion-tabs背景设为透明，内容也不会延伸到tab bar所在的底部区域
2. 当前你给ion-tab-bar设置的是position: relative，它仍然占据文档流位置，本身就会把下方的内容挤开

只需修改两处样式即可实现悬浮效果： #

首先修改ion-tabs的样式，移除背景同时取消默认底部预留空间：

ion-tabs {
  // 移除绿色背景
  background: transparent;
  // 取消tab内容区域默认的底部padding
  --padding-bottom: 0;
  // 如果后续给tab-bar用absolute定位，需要加这行
  position: relative;
}

然后修改ion-tab-bar的定位规则，让它脱离文档流悬浮：

ion-tab-bar {
  // 固定在视口底部用fixed，要跟随页面滚动就用absolute
  position: fixed;
  bottom: 20px;
  border-radius: 16px;
  width: 92%;
  margin: 0 auto;
  border: 1px solid red;
  // 保证tab bar显示在内容上方
  z-index: 99;
}

修改完成后tab bar就会悬浮在页面内容上方，绿色区域消失，页面列表内容也能正常显示在tab bar后方。

内容的提问来源于stack exchange，提问作者Idea