http://fundamentaldesigns.us/normal/
我在开发网站时遇到了一个以前从未遇到过的问题。我有一个具有固定定位和高 z-index 的 header 。它下面的部分具有相对定位,因此我可以绝对定位其中的元素。
在 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, 50, 0.75);
-moz-box-shadow: 0px 1px 7px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 1px 7px 0px rgba(50, 50, 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;
}
}
}
最佳答案
Chrome 中的此类问题通常可以通过在 fixed
元素上添加以下 CSS 声明来缓解。
-webkit-transform: translateZ(0);
此技巧调用硬件加速并提高性能。
关于css - 修复了 Google Chrome 中定位的 header "jumps",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25224969/