html - child 正在计算屏幕的 100% 宽度，而不是 parent

Question

我正在尝试将进度条放入父项中，这非常困难。它是在 Jot 表单上完成的，但可以访问自定义 CSS 等，我已经使用了很多(我猜这可能会造成问题)。

进度条固定在顶部，在父元素div.form-all中作为第一个和第二个元素。我已经尝试了这里关于盒子大小等的所有常见建议，但似乎没有任何效果。

我怀疑这是因为父元素没有明确规定的宽度，因为这极大地解决了这个问题(但破坏了响应能力，因为它在小屏幕上从 ≈36% 宽度变为 100%)。

如有任何帮助，我们将不胜感激。实际的表格可以在这里找到，丹麦语的 Jot 表格:

所有添加的自定义 CSS 都应该通过检查元素可见，但我会提到它以前工作过。

包含进度 div 的 div 具有以下 css 属性: .progressBarContainer.fixed { position:absolute； 顶部:0； 宽度:继承； 背景:#FFF； z-index: 9999;

父级通过 Jotform-coding 具有以下相关属性，没有位置属性: .form-all { 宽度:690px； 宽度:100%； 最大宽度:690px；

提前谢谢你，克里斯。

Answer 1

绝对位置解决方案:你说你正在使用 position: fixed，但这不会继承父级的宽度。需要把.progressBarContainer.fixed改成position: absolute，然后form parent，.form-all，加上position : 相对.

这会将进度条的宽度设置为与表单相同。

---

固定位置解决方案:有多种方法可以使进度条粘在屏幕上。您要么必须在 CSS 中明确说明进度条的最大宽度，要么必须使用 JavaScript 解决方案的 CSS。简单的 CSS 解决方案是将 position: fixed 分配给 .progressBarContainer.fixed，但是你必须指定 max-width: 690px到 .progressBarContainer.fixed。