html - Tab键导致位置变化和溢出隐藏元素出现在屏幕上

Question

这是作为滑块工作的分步表单。

父 div 有样式

#formContainer {
position: absolute;
top: calc((100% - 400px) / 2);
overflow: hidden;
}

孩子们有

.step {
    position: absolute;
    top: 0;
    width: 100%;
}

活跃的孩子有

.step-1 .select {
    left: 0;
}

被动的孩子有

.step-1 .mail, .step-1 .add-message, .step-1 .progress, .step-1 .complete {
    left: 600px;
}

当第一步处于活动状态并按 TAB 键时，它看起来像：

不知何故，即使隐藏的步骤左侧设置为 600 像素，定位冲突和其他步骤元素也会进入屏幕。

Answer 1

添加visibility: hidden到隐藏元素可以解决不需要的滚动和滑动效果。

.step-1 .mail, .step-1 .add-message, .step-1 .progress, .step-1 .complete {
    left: 600px;
    visibility: hidden;
}