据我所知,元素与position: fixed
视口对齐。但在此情况下,fixed
元件(.box
)位于相对于所述模态。
为什么会发生这种情况,如何使其与视口对齐?
这是因为 CSStransform
属性应用于 Bootstrap 的.modal-dialog
元素。根据文档https://www.w3.org/TR/css-transforms-1/#transform-rendering
为transform 属性指定一个除none 之外的值会在它所应用到的元素上建立一个新的局部坐标系。元素从何处渲染到该局部坐标系的映射由元素的变换矩阵给出。转换是累积的。也就是说,元素在其父元素的坐标系内建立它们的局部坐标系。从用户的角度来看,一个元素有效地累积了其祖先的所有变换属性以及应用于它的任何局部变换。这些变换的累积定义了元素的当前变换矩阵。
换句话说,转换元素的固定位置后代的包含块是转换元素,而不是视口。
http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
在这里,如果您希望.box
元素相对于视口对齐,请尝试将元素放置在元素之外.modal-dialog
。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句