Bootstrap：位置固定在模态内的元素未与视口对齐
Bootstrap: Element with position fixed inside modal not aligned with respect to the viewport
据我所知，带有 position: fixed 的元素相对于视口对齐。但在 THIS 场景中，fixed 元素 (.box) 是相对于模态定位的。
为什么会发生这种情况，如何使其与视口对齐？
固定定位与视口相关，除非祖先元素应用了变换。 .modal-dialog 应用了转换，它创建了一个新的上下文来定位 DIV （这就是为什么你的 DIV 留在模态内部）。
这是因为 CSS transform 属性 应用于 Bootstrap 的 .modal-dialog 元素。根据文档 https://www.w3.org/TR/css-transforms-1/#transform-rendering
Specifying a value other than none for the transform property
establishes a new local coordinate system at the element that it is
applied to. The mapping from where the element would have rendered
into that local coordinate system is given by the element’s
transformation matrix. Transformations are cumulative. That is,
elements establish their local coordinate system within the coordinate
system of their parent. From the perspective of the user, an element
effectively accumulates all the transform properties of its ancestors
as well as any local transform applied to it. The accumulation of
these transforms defines a current transformation matrix for the
element.
换句话说，转换后元素的固定位置后代的包含块是转换后的元素，而不是视口。
http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
此处，如果您希望 .box 元素相对于视口对齐，请尝试将元素放在 .modal-dialog 元素之外。
据我所知，带有 position: fixed 的元素相对于视口对齐。但在 THIS 场景中，fixed 元素 (.box) 是相对于模态定位的。
为什么会发生这种情况，如何使其与视口对齐？
固定定位与视口相关，除非祖先元素应用了变换。 .modal-dialog 应用了转换，它创建了一个新的上下文来定位 DIV （这就是为什么你的 DIV 留在模态内部）。
这是因为 CSS transform 属性 应用于 Bootstrap 的 .modal-dialog 元素。根据文档 https://www.w3.org/TR/css-transforms-1/#transform-rendering
Specifying a value other than none for the transform property establishes a new local coordinate system at the element that it is applied to. The mapping from where the element would have rendered into that local coordinate system is given by the element’s transformation matrix. Transformations are cumulative. That is, elements establish their local coordinate system within the coordinate system of their parent. From the perspective of the user, an element effectively accumulates all the transform properties of its ancestors as well as any local transform applied to it. The accumulation of these transforms defines a current transformation matrix for the element.
换句话说，转换后元素的固定位置后代的包含块是转换后的元素，而不是视口。
http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
此处，如果您希望 .box 元素相对于视口对齐，请尝试将元素放在 .modal-dialog 元素之外。