Question

我用 j子制造一个完全超出现有内容的内容。这至少带有意图。

The context is similar to what goes on here:
A List Apart: Making Compact Forms More Accessible

The idea is that you have an element, such as an <input>, and under certain conditions you display another element (in this case a <label>) absolutely positioned on top of it as a hint. Though the general principle is useful in other scenarios as well.

现有几家图书馆这样做,但似乎都按同样的思路细分。

www.un.org/Depts/DGACM/index_spanish.htm 神经方法:

Create the cover element with display:block and position:absolute.
Set the left and top of your cover element to match your covered element

Problem> 每当页面布局发生变化时,如隐藏一段或复制显示,封面的位置就不再相应。

www.un.org/Depts/DGACM/index_spanish.htm 略微改进的办法:

Create the cover element with display:block and position:absolute
Add the cover element immediately before the covered element in the DOM
Set the bottom and right margin of the cover to the negative height and width of the cover

www.un.org/Depts/DGACM/index_spanish.htm 这种办法解决了流布问题,但增加了一个问题,即如果所涉内容属于<条形码>(<>>条/代码>栏目之内,则该封面在显示(由于插入了块状元素)时将产生突破。

也许这是一个已经由人解决的问题。

Answer 1

冷漠态度是最好的,但你忽略了一点。

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

该代码必须作为<条码>divs,is和span,但这只是为了视觉化,它把重要内容——我只在该代码中使用<条码>i,以表明你可以“尽量”原始打字案文。

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

这与第1条办法几乎相同,但添加以下内容除外:相对;至外容器(原元素)——加上“新”元素(span)将始终出现在该方法上,从而解决:

Problem: The cover s position no longer matches whenever the page layout changes, such as hiding a paragraph or resizing the display.*

友情链接