标签页Tabs组件分段类型，外层容器没有使用相对定位时，选中的tab页签样式异常

[maddenBoy]

TuSimple/naive-ui version (版本)

2.37.3

Vue version (Vue 版本)

3.4.7

Browser and its version (浏览器及其版本)

Chrome(120.0.6099.200)

System and its version (系统及其版本)

Window11

Node version (Node 版本)

Reappearance link (重现链接)

https://codesandbox.io/p/sandbox/icy-surf-sr9jj2?file=%2Fsrc%2FDemo.vue%3A28%2C14

Reappearance steps (重现步骤)

方法一：
官方文档https://www.naiveui.com/zh-CN/light/components/tabs
把tabs外层n-card的相对定位注释掉，选中的tab页签样式会丢失
方法二：
打开https://codesandbox.io/p/sandbox/icy-surf-sr9jj2?file=%2Fsrc%2FDemo.vue%3A28%2C14 ，滚动页面，tabs激活页签样式错乱

Expected results (期望的结果)

分段类型的标签页，外层容器没有使用相对定位时，选中的tab页签样式可以正常显示

Actual results (实际的结果)

分段类型的标签页，外层容器没有使用相对定位时，选中的tab页签样式显示异常

Remarks (补充说明)

把tabs外层n-card的相对定位注释掉后显示的样式

使用n-scrollbar包裹tabs后滚动页面的样式

[alaywn]

不仅仅有上述问题，还存在如下问题：

NTabs 设置 type="segment" ，当tabpane数量发生变化后，tabpane显示的宽度没有同步更新，比如原来是2个tabpane，更新为5个tabpane后，tabpane的宽度还是2个时的宽度：

（补充：如果点击切换一下tabpane后，宽度显示则恢复正常）
另外，改变NTabs所在上级元素的宽度后，比如折叠Sider后，也有上述同样的问题。

PS:
type="card"没有这个问题；
版本恢复到2.36.0后，也没有这个问题

[xstxhjh]

暂时解决一下燃眉之急😩

.n-tabs--segment-type > .n-tabs-nav--segment-type {
  & > .n-tabs-rail > .n-tabs-capsule {
    display: none;
  }
  & .n-tabs-tab--active {
    background-color: var(--n-tab-color-segment);
  }
}

[alaywn]

暂时解决一下燃眉之急😩

.n-tabs--segment-type > .n-tabs-nav--segment-type {
  & > .n-tabs-rail > .n-tabs-capsule {
    display: none;
  }
  & .n-tabs-tab--active {
    background-color: var(--n-tab-color-segment);
  }
}

可以解决问题

[Aslantoe]

更新后，tab 分段类型，放到modal中会出现初始化样式问题

[zzy-life]

更新后，tab 分段类型，放到modal中会出现初始化样式问题

我也有这个问题，你怎么解决的

[zzy-life]

目前我用的setTimeout延迟加载的n-tabs，这里修复了各位踢一下谢谢

[07akioni]

Fix, instantly!

修 马上就修！

[kamatil-dev]

still can't find "position:relative", and i'm still facing the problem

When i scroll down, this is what i got:

Solution: just add position: relative to .n-tabs .n-tabs-nav or .n-tabs .n-tabs-rail