html - 更改 CSS 中的背景并在 Chrome 上放置页脚和页眉会使一切变得混乱。为什么？

Question

我目前正在开发一个网站，每次您将鼠标悬停在一篇文章上时都会显示一张图片作为背景（因此每篇文章都有一个背景）。我正在使用这段代码：

.text1{
width: 100%;
position: fixed;
top:0px;
left: 0px;
z-index: -30;
opacity:0;
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
.article_text1:hover .text1{
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
opacity: 1;}

.text1 是图像的类，.article_text 是文章的类。它工作正常，但是当与我的页脚和页眉结合使用时，由于某种原因它搞砸了，但仅限于 Chrome。当您向下或向上滚动页面时，它们会失去固定位置。这是代码

header
{   
    z-index:10;
    font-size: 80px;
    letter-spacing:30px;
    position: fixed;
    text-align: center;
    width: 100%;
    margin-left:8%;
    top:0px;
}

footer
{
    z-index:10;
    position: fixed;
    bottom: 0px;
    width: 100%;
    text-align: center;
}

有人知道我该如何解决吗？