Bootstrap：位置固定在模态内的元素未相对于视口对齐

Question

据我所知，position: fixed的元素与视口对齐。但在THIS方案中，fixed元素（.box）相对于模态定位。

为什么会发生这种情况？如何使其与视口对齐？

Answer 1

这是因为CSS transform属性应用于Bootstrap的.modal-dialog元素。根据文档https://www.w3.org/TR/css-transforms-1/#transform-rendering

  

为transform属性指定一个非零的值   在元素所在的位置建立一个新的局部坐标系   应用于。元素将要渲染的位置的映射   由元素的   转换矩阵。转换是累积的。那是，   元素在坐标内建立其局部坐标系   他们父母的制度。从用户的角度来看，一个元素   有效地累积其祖先的所有变换属性   以及应用于它的任何局部变换。的积累   这些转换定义了当前的转换矩阵   元素。

换句话说，变换后元素的固定位置后代的包含块是变换后的元素，而不是视口。

http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/

此处，如果您希望.box元素相对于视口对齐，请尝试将该元素放置在.modal-dialog元素之外。

http://jsbin.com/wevoferuyo/edit?html,css,js,output

Answer 2

Fixed positioning works in relation to the viewport except when an ancestor element has a transform applied to it. .modal-dialog has transform applied to it which creates a new context in which to position the DIV (this is why your DIV stays inside of the modal).