html - CSS で背景を変更し、Chrome にフッターとヘッダーを配置すると、すべてが台無しになります。なんで？

Question

私は現在、記事にカーソルを合わせるたびに画像を背景として表示する Web サイトに取り組んでいます (記事ごとに 1 つの背景があります)。私はこのコードを使用しています：

.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;
}

誰かがそれを修正する方法を知っていますか?