给定定位时,Div消失

时间:2013-08-01 00:41:29

标签: html css-position fixed

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

我目前正在divs“Portdiv”和Portdiv2下的“Portfolio”部分测试一个图像,其样式与主徽标图像相同。主徽标图像位于主页部分,具有固定定位并显示再一次,只有当一个图像被放置在其他一个部分中时,事情才开始变得怪异。有人可以帮我弄清楚发生了什么吗?

感谢您的时间和帮助!

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

使用-webkit-transform:translate3d(0,0,0);将使GPU转换为CSS转换的动作,使它们更平滑(更高的FPS)。

注意: translate3d(0,0,0)在您看到的内容方面没有任何效果。它在x,y和z轴上移动对象0px。它只是一种强制硬件加速的技术。

transform: translateZ(0);-webkit-transform: translateZ(0);