0

我目前在www.thejasonsanders.com的网站上工作，每当我尝试在除第一个部分（“主页”）之外的任何部分中为 div 提供固定位置时，div 都会消失。我已经尝试了我能想到的一切来纠正这个问题，但似乎没有任何解决办法。所以，我正在转向可能是我在这些类型事务中的第一资源！

我目前正在“Portdiv”和“Portdiv2”下的“投资组合”部分中测试一个图像，其样式与主徽标图像相同。主徽标图像位于主页部分，位置固定，并且显示正确。再次，只有当图像被放置在其他部分之一时，事情才开始变得奇怪。谁能帮我弄清楚发生了什么？

感谢您的时间和帮助！

4

2 回答 2

0

当一个 div 被赋予一个固定的位置并且它在视口之外时基本上不存在。我认为这就是你面临的问题。这是一个快速演示。请注意，当您使浏览器窗口变高或变短时，<img>s 会消失。您可能想使用position: absolute? 对不起，如果我离开了。

于 2013-08-01T00:49:25.867 回答
0

我遇到了同样的问题，这似乎是页面内部发生太多事情时发生的错误，我能够通过将以下转换代码添加到固定位置元素（transform: translateZ(0);-webkit-transform: translateZ(0);）来修复它，这会强制浏览器使用硬件加速来访问设备的图形处理单元 (GPU) 以使像素飞行。另一方面，Web 应用程序在浏览器的上下文中运行，这使软件可以完成大部分（如果不是全部）渲染，从而减少了转换的动力。但是 Web 一直在迎头赶上，现在大多数浏览器供应商都通过特定的 CSS 规则提供图形硬件加速。

使用-webkit-transform: translate3d(0,0,0); 将为 CSS 过渡启动 GPU，使它们更平滑（更高的 FPS）。

注意： translate3d(0,0,0) 对您看到的内容没有任何作用。它在 x、y 和 z 轴上将对象移动 0px。这只是一种强制硬件加速的技术。

#fixed-element {
    position: fixed;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased; /* seems to do the same in Safari Family of Browsers*/
}
于 2014-09-18T23:20:32.657 回答