CSS絕對定位神祕

請考慮下面的網頁。 <img>完全相對於其父級定位，並且當我在Safari或Firefox上加載此頁面時，<img>按預期顯示在右上角（請參見第一幅圖像）。但是，當從<div>中刪除邊框時（例如，通過設置border-width: 0），<img>的位置絕對相對於<p>標籤，它的兄弟！見圖＃2。爲什麼是這樣？邊界應該有什麼區別？CSS絕對定位神祕

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<style type="text/css"> 
body { 
    margin: 0; 
} 
div { 
    position: relative; 
    left: 0; 
    top: 0; 
    border: 1px solid red; 
} 
img { 
    position: absolute; 
    right: 0; 
    top: 0; 
} 
p { 
    margin: 20px; 
} 
</style> 

</head> 
<body> 
    <div> 
     <img src="content/en/flag.png" /> 
     <p>This is a test</p> 
    </div> 
</body> 
</html>

absolutely relative to div absolutely relative to p

來源

2013-07-21 Steveo

嘗試使用css-reset然後檢查頁面。 http://meyerweb.com/eric/tools/css/reset/ – Alon

您的圖片始終位於右上角。它與collapsing margins有關。

試着用背景顏色來做。你會看到你的div正在從幾個像素的頂部移開body。如果刪除p的保證金，一切都會好起來的，或將p設置爲內嵌元素或將其浮動，或者甚至將溢出設置爲auto，hidden或scroll。另一種對抗摺疊邊距的方法是向容器元素添加邊框。所以你真的用這個邊界來解決這個問題。

但圖像總是應該在哪裏。

來源

2013-07-21 09:32:14 pzin

你也可以設置'padding-top：1px;'給父母：http://stackoverflow.com/questions/1762539/margin-on-child -element-moves-parent-element –

謝謝，我不知道摺疊邊距。 – Steveo

它真的奇怪了，但讓我試圖解釋這實際上的元素是不能浮動，您在p標籤，其在div適當考慮使用保證金時，它有邊界，未能實現它的時候它刪除，如果附加的浮動屬性比格也將獲得其高度

添加overflow:auto;到div的它會解決這個問題

來源

2013-07-21 02:44:10 Hushme

CSS絕對定位神祕

回答

相關問題