CSS涵盖现有元素

Question

我正在使用jQuery创建一个完全覆盖任何现有元素的元素.这至少就是这个意图.

上下文与此处的内容类似:
列表分离:使压缩表单更易于访问

这个想法是你有一个元素,比如a <input>,在某些条件下你会显示另一个元素(在这种情况下为a <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>

它不一定是divs,is和spans,但这只是为了可视化,它是重要的嵌套 - 我只i在代码中用来表明你可以"跨越"原始文本的样式.

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

这与方法#1几乎相同,除了position: relative;对外部容器(原始元素)的重要添加- 添加了"new"元素(span)将始终与它相关,这解决了:

问题:只要页面布局发生变化,封面的位置就不再匹配,例如隐藏段落或调整显示大小.*