html - Tab键导致位置变化和溢出隐藏元素出现在屏幕上
问题描述
这是作为滑块工作的分步表单。
父 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 像素,定位冲突和其他步骤元素也会进入屏幕。
解决方案
添加visibility: hidden
到隐藏元素可以解决不需要的滚动和滑动效果。
.step-1 .mail, .step-1 .add-message, .step-1 .progress, .step-1 .complete {
left: 600px;
visibility: hidden;
}
推荐阅读
- flutter - 如何在 Flutter 中使用 Google ML KIT 开发多检测器?
- javascript - 使用 Image URL 训练 Tensorflowjs 程序
- css - grid-row: 1 是做什么的?
- python - 谷歌字典结果抓取
- python - 返回字符串和布尔值的递归函数
- powershell - PowerShell New-ADUser 仍然创建禁用用户
- swift - 即使用户未登录,应用程序也不显示登录页面
- node.js - 无法在 Postman 中为简单的 Node.js 应用程序获得响应
- django - 我的订单没有保存。django中的表格
- powershell - 函数第 3 行的代码是如何工作的?