爲什麼從相對位置改變絕對位置會改變背景圖像的大小？

Question

我有以下的HTML和CSS。如果我將位置屬性從絕對位置改變爲相對位置，則div.raw似乎在html佈局中流動，並且背景圖像不會掩蓋所有內容。如果我不這樣做，那麼它的確如此。爲什麼是這樣？

HTML：

<h1 class="push">Hello World</h1> 
<div class="container"> 
    Some text 
<div class="raw"></div> 
</div> 

CSS：

.push { 
    margin-bottom: 50px; 
    margin-top: 50px; 
} 
.container { 
    margin-top: 50px; 
    width: 500px; 
    height: 500px; 
    margin-bottom: 50px; 
} 
.raw { 
    border: 1px solid black; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-size: auto; 
    background-image: url("http://st-im.kinopoisk.ru/im/wallpaper/2/3/0/kinopoisk.ru-True-Detective-2300505--w--1280.jpg"); 
    //background-repeat: no-repeat; 
    overflow: hidden; 
    width: 50%; 
    height: 100%;} 

Answer 1

因爲絕對定位的元素的相對尺寸都與整個文檔，相對定位元素的相對尺寸都與它的父元素。

Answer 2

絕對定位的元素位置固定到他們的祖先，需要有一個定位。在你的情況下，祖先'容器'沒有位置，所以div.raw就像固定在視口上一樣。事實上，如果你將raw的位置設置爲固定的，你會發現它與絕對相同。然而，一旦你設置了一個容器的位置（例如相對），絕對和固定的差異。

相同的結果，這裏絕對

http://jsfiddle.net/btevfik/0ugp2p2w/2/

一旦你把這個

.container { 
     position:relative; 
} 

通知的結果是不同的

http://jsfiddle.net/btevfik/0ugp2p2w/

http://jsfiddle.net/btevfik/0ugp2p2w/1/

http://jsfiddle.net/btevfik/0ugp2p2w/3/