tyl*_*erl 2 html css jquery layout
我正在使用jQuery创建一个完全覆盖任何现有元素的元素.这至少就是这个意图.
上下文与此处的内容类似:
列表分离:使压缩表单更易于访问
这个想法是你有一个元素,比如a <input>,在某些条件下你会显示另一个元素(在这种情况下为a <label>)绝对位于它上面作为提示.虽然一般原则在其他场景中也很有用.
有几个现有的库可以做这种事情,但它们似乎都沿着相同的路线分解.
天真的方法:
display:block和创建封面元素position:absolute.left和top,以匹配您的封面元素问题:只要页面布局发生变化,封面的位置就不再匹配,例如隐藏段落或调整显示大小.
稍微改进的方法:
display:block和创建封面元素position:absolute这种方法解决了流体布局的问题,但是它增加了一个问题,即如果被覆盖的元素在inline块内,则封面将在它出现时创建一个换行符(因为插入了一个块元素).
据推测,这是一个已经被某人解决过的问题.
cla*_*uzy 11
'天真'的方法是最好的,但你错过了一点.
<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)将始终与它相关,这解决了:
问题:只要页面布局发生变化,封面的位置就不再匹配,例如隐藏段落或调整显示大小.*