大佬教程收集整理的这篇文章主要介绍了css – 在Google Chrome中固定定位标题“跳”,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在开发一个网站,遇到了我以前从未遇到过的问题.我有一个头部具有固定的定位和高z指数.下面的部分具有相对定位,以便我可以绝对地将元素放置在其中.
当在chrome中滚动时,标题“跳转”.我发现,如果我删除z-index,它修复了跳跃问题,但是它并没有显示在其他元素的前面.这里的诀窍在哪里?
HTML
<header> <div class="inner"> <img src="images/logo.png" alt="Normal Public Library Foundation" class="logo"> <nav> <ul> <li><a href="#whatif">Home</a></li> <li><a href="#">2014 Goals</a></li> <li><a href="#">Members</a></li> <li><a href="#">Donate</a></li> </ul> </nav> </div> </header> <div class="whatif section" id="whatif"> <div class="inner"> <h1>What if there was no library?</h1> <a href="#circulation" class="animated bounce"><img src="images/scroll-arrow.png" alt=""></a> </div> </div>
CSS
header { position: fixed; top:0; width: 100%; padding: 20px 0; background-color: #FFF; opacity: 0.9; z-index: 999; -webkit-box-shadow: 0px 1px 7px 0px rgba(50,50,0.75); -moz-box-shadow: 0px 1px 7px 0px rgba(50,0.75); box-shadow: 0px 1px 7px 0px rgba(50,0.75); .logo { float: left; } nav { float: right; margin:8.5px 0; ul { list-style-type: none; padding: 0; margin: 0; li { display:inline; font-size: 14px; line-height: 20px; padding: 0 30px; text-transform: uppercase; } } } } .section { height: 800px; position: relative; .next { position:absolute; bottom: 75px; left:50%; color: #f5f2dc; padding: 5px 12px; border-radius: 3px; background-color: #454545; opacity: .5; margin-left: -28px; &:hover { background-color: #565656; color: #FFF; } } }
-webkit-transform: translateZ(0);
这个技巧调用硬件加速并提高性能.
以上是大佬教程为你收集整理的css – 在Google Chrome中固定定位标题“跳”全部内容,希望文章能够帮你解决css – 在Google Chrome中固定定位标题“跳”所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。