移动端选项卡面板重叠错位？检查 absolute 定位与容器高度
选项卡面板重叠错位通常是因为面板元素使用了绝对定位且未设置正确的高度，导致内容溢出或显示异常。
检查面板容器的定位上下文
面板重叠错位通常是因为面板元素使用了绝对定位且未设置正确的高度，导致内容溢出或显示异常。首先需要检查包含面板的容器元素是否设置了相对定位，这是让内部绝对定位元素相对于容器定位的关键。在提供的代码中，.info-box .panels 容器设置了 position: relative，这为内部的 .info-box [role='tabpanel'] 元素提供了定位参考。如果容器缺少这一属性，绝对定位的面板将相对于视口定位，导致布局错乱。
在移动端调试时，可以通过开发者工具检查面板容器的计算样式。确认 position 属性是否为 relative，以及 top、left、right、bottom 属性是否被意外修改。如果容器本身被设置为 fixed 或 absolute，且没有明确的父级定位上下文，面板的位置将无法正确计算。确保容器是文档流中的块级元素，并且其定位上下文正确，是解决面板重叠问题的第一步。
确认面板元素的高度与容器一致
面板元素的高度必须与容器高度保持一致，否则会导致内容溢出或显示不全。在代码示例中，.info-box .panels 设置了固定高度 height: 352px，而内部的 .info-box [role='tabpanel'] 也设置了相同的高度 height: 352px。这种设置确保了所有面板在垂直方向上对齐，并且不会超出容器的边界。如果面板高度小于容器，可能会出现空白区域；如果大于容器，内容将被裁剪。
可以通过检查 CSS 规则来验证高度设置是否正确。确保面板元素的 height 属性与容器元素的 height 属性数值相同。如果使用了 padding 或 margin，需要确保这些属性不会导致总高度超出容器。在移动端，由于屏幕空间有限，固定高度是常见的做法，但也要注意内容是否需要自适应。如果内容过多，可能需要调整容器高度或使用滚动条，而不是简单地裁剪内容。
验证面板的绝对定位与堆叠顺序
面板元素使用绝对定位后，它们会按照文档顺序堆叠在容器内。默认情况下，后定义的面板会覆盖先定义的面板。在代码中，所有面板都设置了 position: absolute，并且都位于容器的左上角（top: 0; left: 0）。这意味着它们会完全重叠。通过 JavaScript 动态添加或移除 .is-hidden 类来控制面板的显示与隐藏，从而实现选项卡切换的效果。
在移动端调试时，可以通过检查面板元素的 z-index 属性来验证堆叠顺序。如果需要调整面板的显示层级，可以设置 z-index 属性。此外，确保面板的 padding 和 background-color 属性设置正确，以便在面板显示时提供良好的视觉反馈。如果面板重叠错位，可能是因为面板的定位基准点不一致，或者容器的高度计算错误。
检查 JavaScript 对面板显示的控制逻辑
JavaScript 代码负责控制面板的显示与隐藏，通过添加或移除 .is-hidden 类来实现。在代码中，当用户点击选项卡时，JavaScript 会遍历所有面板，将未被选中的面板设置为 .is-hidden 类，从而隐藏它们。同时，将选中的面板移除 .is-hidden 类，使其显示出来。这种逻辑确保了同一时间只有一个面板可见。
在移动端调试时，可以通过检查 JavaScript 代码来验证控制逻辑是否正确。确保 setSelectedTab 函数正确地设置了 aria-selected 属性，并且正确地添加或移除了 .is-hidden 类。如果面板显示异常，可能是因为 JavaScript 代码没有正确执行，或者类名设置错误。可以通过浏览器控制台查看错误信息，并检查 DOM 元素的状态。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。