css - 固定位置随着设备宽度的变化而变化

Question

position:fixed 元素发生了一些奇怪的事情。

当视口(viewport)宽度为 760px 时，固定位置元素似乎继承了 position:absolute。而不是 taking top:5em，botttom:5em 从视口(viewport)。它扩展到整个页面。如果一个元素的位置是固定的，那么父元素的位置应该无关紧要，对吧？为什么会这样？

我有几个影响某些父 div 的媒体查询，但这是否会影响 positon:fixed 元素。

可以看到here当您单击“单击以获取更多信息”时。

Answer 1

在 Chrome 的开发者工具中查看您的代码时，我注意到当我禁用以下 CSS 代码时，固定位置大小调整再次按预期工作。

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-o-transition: -o-transform 500ms ease;
transition: transform 500ms ease;

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;

这是 .csstransforms3d.csstransitions.js-ready #inner-wrap 属性里面的 @media 屏幕和 (max-width: 47.5em) 查询style.css.