CSS絕對位置對比P

我遇到了一個嵌套的p標籤，它帶有絕對位置的問題。 This JSFiddle演示了區別。基於this question的描述和user1334007的評論絕對定位是相對於第一個父親的。儘管w3schools沒有說明，但它似乎是div標籤的情況。對於p標籤，似乎絕對是相對於頁面而言的，正如Michael Zaporozhets在SO回答和w3school描述的那樣。CSS絕對位置對比P

考慮到所有這些環節，我是犯了一個錯誤與我的風格的地方，或者是這些執行不同？如果他們的表現不同，有人可以提供解釋，爲什麼會發生這種情況？我問的主要原因是這是70-480認證考試中的一個問題，儘管我知道答案是正確的，但我希望能夠有信心地繼續使用定位。

守則jsFiddle鏈接（需要有代碼提交的jsfiddle鏈接，所以我只是把它全部）

<h2>Paragraph Position</h2> 
<p class="outer">Hello Outer 
    <p class="inner">Hello Inner</p> 
</p> 
<br/> 

<h2>Division Position</h2> 
<div class="outer">Hello Outer 
    <div class="inner">Hello Inner</div> 
</div> 

.outer { 
    position: relative; 
    background-color: red; 
    height: 100px; 
    width: 500px; 
} 

.inner { 

    position: absolute; 
    top: 15px; 
    left: 15px; 
    background-color: green; 
}

來源

2014-01-07 JabberwockyDecompiler

如果你看一看的HTML（我望着Chrome檢查），你」我們將看到p.inner實際上並不在p.outer之內。正因爲如此，p.inner將絕對定位相對於具有relative定位或html標籤（在這種情況下，html標籤）第一父元素。

編輯：我查看了Firefox，好像這些瀏覽器會將嵌套的p標籤轉換爲單獨的p標籤。所以一個p標籤裏面的另一個p標籤會導致三個兄弟p標籤。

來源

2014-01-07 23:29:32 Dennis

我沒有注意到，它創建了一個額外的設置p標籤之前和之後。我忘了提到這一點。這是正常的嵌套p標籤？ – JabberwockyDecompiler

編輯完成後：它也使用IE 11完成此操作。但是，這很明顯地解釋了爲什麼這不會脫離父標籤。我創建另一個問題，爲什麼HTML不做我告訴它做的;）。 – JabberwockyDecompiler

@JabberwockyDecompiler是的，看起來好像當前的瀏覽器標準使得'p'標籤將被自動關閉（參見這個問題：http://stackoverflow.com/questions/4291467/nesting-block-level-elements-inside -p標籤正確或錯誤） – Dennis

CSS絕對位置對比P

回答

相關問題