突出显示输入字段中的文本/标记 - 松弛搜索框样式

Question

我喜欢松弛在他们的搜索中突出显示关键词和价值观的方式我想做类似的事情。

对于那些不知道如何截图的人来说：

当你检查松弛的dom和css时，就像这样

<div style="position: relative;">
    <input id="search-query">

    <div class="highlighter_underlay">
        regurlar text that doesn't match keyword:value goes here  
        <span class="modifier">key:</span>
        <span class="keyword">value</span>
        or here  
        <span class="ghost_text">hint</span>
    </div>
</div>

所以我使用绝对定位将div定位在输入上，将.highlighter_underlay文本设置为等于值的内容，标记化输入，为.modifier和.keyword添加漂亮的样式 - 一切都很简单，有效且看起来很棒。

但有一件事我不知道如何处理。

请注意，输入具有固定宽度，但您可以在输入中输入更多文本，它将溢出并隐藏。

问题是如何将叠加div与文本输入文本同步移动，因为它必须对齐？请注意，必须移动div overlay。

这似乎是一些css定位技巧，因为当我输入更多文本到输入时我没有看到任何css属性发生变化所以我不认为它是javascript，我也不能在他们的css中找到任何具体的css ......

有什么想法吗？

这是原型的链接： http://codepen.io/anon/pen/dYZzeB

Answer 1

将元素相对于其父元素移动的一种方法是使用以下CSS组合：   

父元素使用：position: relative

子元素使用：position: absolute

CODEPEN Example ：这个简单的例子说明了相对关系。

在您引用的实时Slack代码中，实际样式框来自pseudo element ::before。如果将此绝对值设置为其相对集父级，则它将遵循该父级的相对性 - 从而使其能够相对于父级跟踪左侧和右侧。