[Bug Report] van-tabs的active彩色高亮下划线的显示与overlay的问题 可任意简单复现 包含原因分析

[realpg]

重现链接

https://gist.github.com/realpg/9631bc5b92f7ae1beaf07ad37a40481b

Vant 版本

4.7.3

描述一下你遇到的问题。

可以直接用默认组件直接布局直接复现 所以未提供代码片段

问题直观图：

问题描述：
页面上放一个默认的vant的tabs组件，且开启了选中项彩色下划线

如果这时界面逻辑弹出一个overlay组件，则那个彩色的下划线不会被overlay遮挡

这里放任何其他非float的组件应该也有同样的问题

问题原因分析：

如图所示 这个下划线是 到dom上 .van-tabs__line 是一个absolute的div且z-index是1 他是float状态的
而overlay是类block布局的，填充纯色背景遮挡不住这个线

这应该是一个bug吧。overlay遮挡不住的元素。
或者换句话说，在页面基本布局结构里放了一个z-index是1的float元素，不应该这样设计吧

重现步骤

页面上放一个默认的vant的tabs组件，默认开启了选中项彩色下划线

如果这时界面逻辑弹出一个overlay组件，则那个彩色的下划线不会被overlay遮挡

设备/浏览器

任何设备 全平台

[inottn]

不知道你理解的 float 和 block 是指什么。但这个现象和定位元素的层级有关系，你可以通过设置 overlay 的 z-index 解决这个问题。

[realpg]

不知道你理解的 float 和 block 是指什么。但这个现象和定位元素的层级有关系，你可以通过设置 overlay 的 z-index 解决这个问题。

按css说明z-index仅对position: relative | absolute | fixed生效
你总不能要求其他基本布局都做成这几种position吧

涉及在基本占位布局做了position: relative 带z-index的结构真的是正常的么？

[inottn]

不知道你理解的 float 和 block 是指什么。但这个现象和定位元素的层级有关系，你可以通过设置 overlay 的 z-index 解决这个问题。

按css说明z-index仅对position: relative | absolute | fixed生效 你总不能要求其他基本布局都做成这几种position吧

涉及在基本占位布局做了position: relative 带z-index的结构真的是正常的么？

默认的非定位布局也不会涉及到元素重叠的问题，你能碰到的这个问题，就是因为他们都是定位元素，所以需要通过 z-index 解决。如果有问题，问题也是默认的 z-index 值是否合理，而不是这样的结构是否正常。你也可以参考其它组件库的实现逻辑。

[realpg]

ok 按您说的 这个z-index是否合理呢？是不是bug呢
overlay比基本元素还在底层

[inottn]

ok 按您说的 这个z-index是否合理呢？是不是bug呢 overlay比基本元素还在底层

它们的层级是一样的，所以最终它们展示上的层级和在文档流的顺序也有关系。修改默认的 z-index 值属于 breaking change。不过提供了 z-index 的 prop 和 css 变量，你可以根据项目的实际情况进行配置。

[realpg]

ok 按您说的 这个z-index是否合理呢？是不是bug呢 overlay比基本元素还在底层

它们的层级是一样的，所以最终它们展示上的层级和在文档流的顺序也有关系。修改默认的 z-index 值属于 breaking change。不过提供了 z-index 的 prop 和 css 变量，你可以根据项目的实际情况进行配置。

那没问题了 贵司果然大厂风范 领教了

[inottn]

ok 按您说的 这个z-index是否合理呢？是不是bug呢 overlay比基本元素还在底层

它们的层级是一样的，所以最终它们展示上的层级和在文档流的顺序也有关系。修改默认的 z-index 值属于 breaking change。不过提供了 z-index 的 prop 和 css 变量，你可以根据项目的实际情况进行配置。

那没问题了 贵司果然大厂风范 领教了

不知道你指的贵司、大厂是什么，现在维护这个项目的大都来自社区的贡献者，大家都是不求回报、无私奉献。包括这个项目的 leader 也是在工作外的空余时间维护这个项目。友善的发言也是为提升开源环境做贡献~

[realpg]

ok 按您说的 这个z-index是否合理呢？是不是bug呢 overlay比基本元素还在底层

它们的层级是一样的，所以最终它们展示上的层级和在文档流的顺序也有关系。修改默认的 z-index 值属于 breaking change。不过提供了 z-index 的 prop 和 css 变量，你可以根据项目的实际情况进行配置。

那没问题了 贵司果然大厂风范 领教了

不知道你指的贵司、大厂是什么，现在维护这个项目的大都来自社区的贡献者，大家都是不求回报、无私奉献。包括这个项目的 leader 也是在工作外的空余时间维护这个项目。友善的发言也是为提升开源环境做贡献~

我的问题是，那你说它到底合理不合理呢？
中文理解就这么困难么？

我当然知道能改，最不济上个important什么不能覆盖

[inottn]

我的问题是，那你说它到底合理不合理呢？ 中文理解就这么困难么？

我当然知道能改，最不济上个important什么不能覆盖

overlay 和 popup 不同，使用 overlay 的场景大部分是用户用于封装自己的组件，默认的 z-index 设置高了，也会和其余高的组件冲突，没有所谓的银弹，你觉得在这里合理了，在别的场景下可能就不合理了，所以应该由用户自己根据需要配置层级。

因为修改默认值属于 breaking change 了，现有的部分项目可能隐性的依赖了这个值，如果更改了，会出现更多层级上的冲突。

[realpg]

我说大厂风范没错吧

能不能用一个字或者两个字回答我的问题

是不是合理，是你提出的
我问你是不是合理
你总能用一大段话顾左右而言他，就是不正面回答问题

[inottn]

我说大厂风范没错吧

能不能用一个字或者两个字回答我的问题

是不是合理，是你提出的 我问你是不是合理 你总能用一大段话顾左右而言他，就是不正面回答问题

1. 我是来自社区的开发者，和你一样。但你喜欢扣帽子就扣吧，还是那句话，友善的发言也是为提升开源环境做贡献。
2. 是二极管吗，一个问题的回答只能用是和不是回答吗 🤔。
3. 我觉得质疑别人阅读理解有没有问题的人，应该对自己的阅读理解有自信吧，现在看来好像不是这样子。
4. 默认的值无论是什么都有可能在某个场景下是不合理的。

[realpg]

不出意料的又一大串文字，加了一大堆定语，然后还不给出明确说法
说大厂风范有什么不对，不就是一句话

用户，我是你爸爸

[inottn]

不出意料的又一大串文字，加了一大堆定语，然后还不给出明确说法 说大厂风范有什么不对，不就是一句话

用户，我是你爸爸

因为看问题原因分析里很多基础的概念比较混乱，以及最后给出的结论也是错误的。所以我期望能向你描述清楚问题的真正原因是什么，以及如何解决。可能我先入为主了，觉得你更想要的是如何解决这个问题的答案。

看你很纠结大厂风范，可能之前因此受伤过？但在这里，我不是你爸爸，所以参与者都是平等的，也许我们的角色下次就互换了，你可以更多的关注如何解决问题，与之无关的东西都可以丢到一边，避免情绪化的措辞。

[vczyh]

来自：https://v2ex.com/t/993100#reply2

[vczyh]

我觉得维护者很友好了

[inottn]

我觉得维护者很友好了

感谢理解

[chenjiahan]

Vant 目前是社区主导的开源项目，@inottn 为 Vant 维护做了非常多的贡献，希望大家能在 issues 里友善沟通 🫶

[SylarLong]

从V站过来的～看了前因后果，维护者挑不出毛病～issue创建者过于暴躁了。别人耐心解释，你说别人长篇大论，别人要是简单几个字回你，你又可能觉得是敷衍。用爱发电把代码开源出来给大家用，还要被阴阳怪气的在外站挂～真的是心都凉透了！我也维护着两个开源库，希望以后使用我代码的用户里面不要出现类似的用户。

[rainbowflesh]

从V站过来的～看了前因后果，维护者挑不出毛病～issue创建者过于暴躁了。别人耐心解释，你说别人长篇大论，别人要是简单几个字回你，你又可能觉得是敷衍。用爱发电把代码开源出来给大家用，还要被阴阳怪气的在外站挂～真的是心都凉透了！我也维护着两个开源库，希望以后使用我代码的用户里面不要出现类似的用户。

其实 author 的 issue 是比较规范的, 这点不可否认值得好评👍; 不过展现出来对企业开源的偏见, 包括作者自己也承认了三脚猫技术, 技术人员多少都会在一知半解的时候出现过度自信, 开源社区还是适当包容吧.

@inottn @chenjiahan 把这个 issue 归档或者设置禁止跟进吧, 作者把自己挂了之后难免还会在 issue 里吵起来.

[SylarLong]

从V站过来的～看了前因后果，维护者挑不出毛病～issue创建者过于暴躁了。别人耐心解释，你说别人长篇大论，别人要是简单几个字回你，你又可能觉得是敷衍。用爱发电把代码开源出来给大家用，还要被阴阳怪气的在外站挂～真的是心都凉透了！我也维护着两个开源库，希望以后使用我代码的用户里面不要出现类似的用户。

其实 author 的 issue 是比较规范的, 这点不可否认值得好评👍; 不过展现出来对企业开源的偏见, 包括作者自己也承认了三脚猫技术, 技术人员多少都会在一知半解的时候出现过度自信, 开源社区还是适当包容吧.

@inottn @chenjiahan 把这个 issue 归档或者设置禁止跟进吧, 作者把自己挂了之后难免还会在 issue 里吵起来.

格局 👍

[Cregin]

从未见过如此阴阳怪气之人

[CC11001100]

不出意料的又一大串文字，加了一大堆定语，然后还不给出明确说法 说大厂风范有什么不对，不就是一句话
用户，我是你爸爸

因为看问题原因分析里很多基础的概念比较混乱，以及最后给出的结论也是错误的。所以我期望能向你描述清楚问题的真正原因是什么，以及如何解决。可能我先入为主了，觉得你更想要的是如何解决这个问题的答案。

看你很纠结大厂风范，可能之前因此受伤过？但在这里，我不是你爸爸，所以参与者都是平等的，也许我们的角色下次就互换了，你可以更多的关注如何解决问题，与之无关的东西都可以丢到一边，避免情绪化的措辞。

爱了爱了，粉了粉了 ❤

[laike9m]

我觉得你有病（阅读障碍、躁狂症），该治