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。