背景圖像定位在'0％0％'w.r.t屏幕而不是父元素，爲什麼？

Question

爲了更好地理解我在說什麼，head over to this pen其中顯示了我正在使用的HTML代碼（with preview）的HTML &。

看看CSS代碼的第二背景圖像：

.top-navbar-channels a { 
    background-attachment: fixed; 
    background-color: transparent; 
    background-image: url('http://i.imgur.com/Z1YZt.png'); 
    background-position: 112px 8px; 
    background-repeat: no-repeat; 
    padding: 0 0 0 35px; 
} 

我不明白的是，背景被定位w.r.t屏幕，而不是父元素。我試圖在父元素和元素本身上嘗試display: block;，但沒有任何改變。

我錯過了什麼？

Answer 1

當你有background-attachment: fixed時，背景圖像的原點是總是的視口。這就是爲什麼它從屏幕的左上角開始，並且相對於屏幕的左上角定位。

由於您已將導航欄固定到頁面頂部，因此您不必將固定位置應用於背景圖像。從兩個導航鏈接中刪除background-attachment: fixed應該是安全的，並相應地調整座標。