CSS覆蓋現有元素

Question

我正在使用jQuery創建一個完全覆蓋現有元素的元素。至少這是意圖。

的背景是類似於在這裏發生的事情：
A List Apart: Making Compact Forms More Accessible

的想法是，你有一個元素，如<input>，並在一定條件下你顯示另一個元素（在這種情況下<label>）絕對定位在它的頂部作爲一個提示。儘管一般原則在其他情況下也很有用。

有幾個現有的圖書館做這種事情，但他們似乎都沿着同樣的路線分解。

簡易方法：

• 與display:block和position:absolute創建封面元素。
• 設置你的封面元素的left和top到

問題符合您的覆蓋元素：封面的位置不再匹配時頁面佈局的變化，如隱藏着一個段落或調整顯示器。

稍加改善方法：

• 創建display:block和position:absolute
• 的封面元素添加封面元素立即之前在DOM
• 涵蓋元素設置的底部，覆蓋的右邊緣至覆蓋的負高度和寬度

該方法解決了流體佈局的問題，但它增加了一個問題，如果覆蓋的元素位於inline塊內，則封面在顯示時（由於插入塊元素）會創建換行符。

大概這是一個問題，已經在某個地方被某人解決了。

Answer 1

'天真'的做法是最好的，但你錯過了一點。

<div><i>Element to be covered</i> <span>Shiny new element</span></div> 

它不必是div S，i S和span秒，但這個僅僅是可視化的，它是很重要的嵌套 - 我只在代碼中使用i給你看可以「跨越」了造型原文也是..

div {position: relative; width: 200px; height: 50px;} 
span {position: absolute; top: 0; left: 0; height: 100%; width: 100%;} 

，幾乎是相同的方法＃1，除了用position: relative;重要除了外容器（原始的元素） - 與此添加了「新的」元件（span）將總是出現在關係到它，這解決了：

問題：蓋的無 更長的匹配位置每當 頁面佈局的變化，如隱藏 段落或調整所述顯示*

0。