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和span，但这只是用于可视化，它是重要的嵌套 - 我只使用{{1}在该代码中显示您可以“跨越”原始文本以进行样式设计..

与方法＃1几乎相同，只是在外部容器（原始元素）中添加了div {position: relative; width: 200px; height: 50px;} span {position: absolute; top: 0; left: 0; height: 100%; width: 100%;} - 添加了“new”元素（position: relative;）总是与它相关，这解决了：

问题：封面的位置没有每当页面更长时间匹配布局更改，例如隐藏段落或调整显示大小。*

CSS涵盖现有元素

1 个答案: