Bootstrap:在模态内固定位置的元素未与视口对齐

卡蒂卡鲁纳

据我所知,元素与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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

固定位置的元素不适合窗口/视口的宽度

来自分类Dev

子元素相对于视口固定定位

来自分类Dev

固定的元素位置与父级相关,而不与视口相关

来自分类Dev

相对于视口(左)和静态元素(右)定位的固定元素

来自分类Dev

相对于视口(左)和静态元素(右)定位的固定元素

来自分类Dev

iOS Safari:宽度大于视口的宽度为100%的固定位置标头

来自分类Dev

如何使div覆盖没有固定位置的浏览器视口?

来自分类Dev

将元素与视口的右边缘对齐

来自分类Dev

CSS“固定”子元素相对于父元素而不是视口的位置,为什么?

来自分类Dev

固定位置元素位于绝对位置元素内

来自分类Dev

固定位置元素位于绝对位置元素内

来自分类Dev

对齐固定位置的元素以使其水平居中

来自分类Dev

元素的固定位置?

来自分类Dev

在固定位置的div内垂直对齐跨度

来自分类Dev

相对于块而不是视口固定的位置

来自分类Dev

模态固定位置内容移位

来自分类Dev

获取相对于视口顶部的元素位置

来自分类Dev

如何获取元素相对于浏览视口的位置

来自分类Dev

材质UI纸张元素未覆盖视口高度的100%

来自分类Dev

视口居中 <div> 对齐

来自分类Dev

如何根据Bootstrap 4中的视口使列水平对齐或垂直对齐?

来自分类Dev

如何根据设备视口在Bootstrap中将按钮从垂直对齐到水平对齐?

来自分类Dev

如何使图像缩小以适合固定位置的弹性框模态

来自分类Dev

如何使固定位置的元素水平居中

来自分类Dev

在特定位置停止固定元素滚动?

来自分类Dev

如何使固定位置的元素水平居中

来自分类Dev

在特定位置停止固定元素滚动?

来自分类Dev

过渡固定位置元素的高度

来自分类Dev

Bootstrap - 在图像上固定位置

Related 相关文章

  1. 1

    固定位置的元素不适合窗口/视口的宽度

  2. 2

    子元素相对于视口固定定位

  3. 3

    固定的元素位置与父级相关,而不与视口相关

  4. 4

    相对于视口(左)和静态元素(右)定位的固定元素

  5. 5

    相对于视口(左)和静态元素(右)定位的固定元素

  6. 6

    iOS Safari:宽度大于视口的宽度为100%的固定位置标头

  7. 7

    如何使div覆盖没有固定位置的浏览器视口?

  8. 8

    将元素与视口的右边缘对齐

  9. 9

    CSS“固定”子元素相对于父元素而不是视口的位置,为什么?

  10. 10

    固定位置元素位于绝对位置元素内

  11. 11

    固定位置元素位于绝对位置元素内

  12. 12

    对齐固定位置的元素以使其水平居中

  13. 13

    元素的固定位置?

  14. 14

    在固定位置的div内垂直对齐跨度

  15. 15

    相对于块而不是视口固定的位置

  16. 16

    模态固定位置内容移位

  17. 17

    获取相对于视口顶部的元素位置

  18. 18

    如何获取元素相对于浏览视口的位置

  19. 19

    材质UI纸张元素未覆盖视口高度的100%

  20. 20

    视口居中 <div> 对齐

  21. 21

    如何根据Bootstrap 4中的视口使列水平对齐或垂直对齐?

  22. 22

    如何根据设备视口在Bootstrap中将按钮从垂直对齐到水平对齐?

  23. 23

    如何使图像缩小以适合固定位置的弹性框模态

  24. 24

    如何使固定位置的元素水平居中

  25. 25

    在特定位置停止固定元素滚动?

  26. 26

    如何使固定位置的元素水平居中

  27. 27

    在特定位置停止固定元素滚动?

  28. 28

    过渡固定位置元素的高度

  29. 29

    Bootstrap - 在图像上固定位置

热门标签

归档