html - 透明文本框 basemap

Question

我正在寻找克隆 Google Instant 的“underlay/type ahead”类型外观，其中系统预测的内容显示为灰色，位于您正在输入的内容之前。

它的技术部分我完全排序了，以及表示文本。我只是无法弄清楚如何在灰色文本的顶部进行 CSS 定位和透明文本框。

有人知道如何简单地做到这一点吗？

我尝试改编其他来源的代码，但无法获得透明文本框下方带有灰色文本的文本。

Answer 1

我相信您正在寻找这样的东西。请记住，它们需要放在一起，因此将它们一起包装在 div 中可能是个好主意。

HTML

<div class='top'>
    <input type='text' id='gray'/>
</div>
<div>
    <input type='text' id='type'/>
</div>​

CSS

.top {
    background:transparent;
    position:relative;
}
input {
    font-size: 14px;
    width: 200px;
}
#type {
    background: transparent;
    z-index: 1;
}
#gray {
    position: absolute;
    z-index: -1;
    color: silver;
}​

实例

http://jsfiddle.net/r4jSR/

编辑
这种定位是通过将 position:relative div 堆叠在另一个 block 级元素之上，然后将 div 的内容设置为绝对的，但是没有定位。这会导致 div 折叠，因为它没有内容，并且 - 只要两个 block 元素都没有边距 - 绝对定位的 0,0 坐标应该正确放置在下面的 block 元素之上。急板。 Google 就是这样做的。