固定高度divs不使用百分比top值

Question

我正在编写一个JavaScript工具（不是浏览器附加组件），以在Page-Load上自动突出各种颜色的关键字，并且在页面上遇到问题，在页面旁边创建"突出显示栏"滚动栏显示每个结果在哪里。

到目前为止，我由此产生的HTML代码看起来像这样：

<div class="highlight-bar" style="position: fixed; top: 0px; bottom: 0px; right: 0px; width: 8px; border-left: 1px solid black; background-color: grey;">
    <div class="highlight-tick" style="width: 100%; height: 2px; top: 40%; left: 0px;" />
    <div class="highlight-tick" style="width: 100%; height: 2px; top: 55%; left: 0px;" />
</div>

请注意，我正在运行时生成样式数据，并且没有任何影响这些元素的CSS规则。是的，我已经检查了三遍。

现在，" tick"甚至都没有出现，而是在容器的顶部闲逛。

是的，我已经尝试在这里找到一个答案，但是它们似乎都没有以允许容器扩展使用浏览器窗口扩展的情况。

Answer 1

将position: absolute;添加到.highlight-tick

我添加了一个背景色，并使滴答较厚用于查看目的。

<div class="highlight-bar" style="position: fixed; top: 0px; bottom: 0px; right: 0px; width: 8px; border-left: 1px solid black; background-color: grey;">
    <div class="highlight-tick" style="position: absolute; width: 100%; height: 10px; top: 40%; left: 0px;background: blue;" />
    <div class="highlight-tick" style="position: absolute; width: 100%; height: 10px; top: 55%; left: 0px;background: red;" />
</div>