html - 不使用百分比 TOP 值的固定高度 DIV

Question

我正在编写一个 Javascript 工具(不是浏览器插件)以在页面加载时自动以各种颜色突出显示关键字，并且在页面滚动条旁边创建“突出显示栏”以显示每个结果的位置时遇到问题。

到目前为止，我生成的 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 规则。是的，我已经检查了三遍。

现在，“蜱虫”甚至没有出现，而是卡在容器的顶部。

是的，我已经尝试在这里找到答案，但似乎没有一个以允许容器随浏览器窗口缩放的方式涵盖这种情况。

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>