2013-08-01 29 views
0

我目前在www.thejasonsanders.com的网站上工作,每当我尝试在除第一个(“主页”)之外的任何部分给出div一个固定位置时,div消失。我尝试了所有我能想到的方法来纠正这个问题,似乎没有任何东西可以解决问题。所以,我正在转向可能是我在这些类型的问题上的头号资源!Div在给定固定位置时消失

我目前在divs“Portdiv”和Portdiv2下的“Portfolio”部分测试了一个图像,主图像的样式与主div图像相同。主logo图像位于主页部分,显示正确,再次,它只是当一个图像被放置在其他部分的其中一个部分开始行事怪异的时候,任何人都可以请帮我弄清楚发生了什么事情?

谢谢你的时间和帮助!

回答

0

当一个div被赋予一个固定的位置并且它在视口之外基本上不存在,我认为这就是你所面临的问题Here's a quick demo。降低并且更短的<img> s消失。您可能想要使用position: absolute?对不起,如果我走了。

+1

非常感谢您的快速反应,比尔!你的回答实际上是很有意义的,它让我看到了我以错误的方式思考我的问题的事实。我感谢您花时间向我解释这一点。祝你有个好的一天! – user1721301

+0

很高兴能帮到你! –

0

我有同样的问题,它似乎是一个错误发生在页面内部发生太多时,我可以通过将以下转换代码添加到固定位置元素来修复它(transform: translateZ(0);-webkit-transform: translateZ(0); ),强制浏览器使用硬件加速来访问设备的图形处理单元(GPU)以使像素飞行。另一方面,Web应用程序运行在浏览器的上下文中,这使得软件可以执行大部分(如果不是全部)渲染,从而导致转换的功率减少。但是网络一直在追赶,大多数浏览器厂商现在都通过特定的CSS规则来提供图形硬件加速。

使用-webkit-transform:translate3d(0,0,0);将启动GPU进行CSS转换,使其更平滑(更高的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*/ 
}