相對定位留下缺口

嗨我想用相對位置來放置我的覆蓋div div-profile-top div後面。但是，由於某種原因，它會在封面div通常會出現的地方留下空隙。我究竟做錯了什麼？相對定位留下缺口

CSS：

#cover-wrap { 
position: relative; 
top: -65px; 
height: 250px; 
width: 470px; 
background: url('https://sphotos-a.xx.fbcdn.net/hphotos-  
ash3/540880_10200267172913759_929968936_n.jpg') no-repeat center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
}

來源

2013-04-04 user2096890

不知道這部影片的聲音是什麼好，但是它演示了相對定位：http://www.youtube.com/watch?v=8BZS--kcMZ0 – cimmanon 2013-04-04 20:31:37

這就是相對定位的工作原理。元素最初佔據的空間仍然是從文檔中劃分出來的，所以當您調整前一個元素的頂部值時，它下面的元素不會向上移動。將頂部轉換爲頁邊距可以獲得您要查找的效果。

http://jsfiddle.net/QPZEk/4/

#cover-wrap { 
    margin-top: -65px; 
    height: 250px; 
    width: 470px; 
    background: url('https://sphotos-a.xx.fbcdn.net/hphotos-ash3/540880_10200267172913759_929968936_n.jpg') no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

來源

2013-04-04 20:08:37 cimmanon

要移動的圖像從它的原始位置，這影響下面的文字。您可以添加負邊距請參閱http://jsfiddle.net/QPZEk/3/

#cover-wrap { 
position: relative; 
top: -65px; 
margin-bottom:-65px; 
height: 250px; 
width: 470px; 
background: url('https://sphotos-a.xx.fbcdn.net/hphotos-ash3/540880_10200267172913759_929968936_n.jpg') no-repeat center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
}

來源

2013-04-04 19:52:35 jacksonfiverniner

我喜歡做這個是得到＃的父蓋包裝的位置：相對。這將允許您的＃封面包裝具有絕對位置。有位置的父母的孩子：親戚可以擁有絕對的位置，這絕對會將圖像置於相對區域。

當你給div一個位置：absolute時，你將不會再有這個margin了。對於動態元素也很容易做到這一點。

例如：

#parent { 
    position:relative; 
} 

#cover-wrap { 
    height: 250px; 
    width: 470px; 
    background: url('https://sphotos-a.xx.fbcdn.net/hphotos- ash3/540880_10200267172913759_929968936_n.jpg') no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

來源

2013-04-05 00:00:31 ntgCleaner

相對定位留下缺口

回答

相關問題