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

我添加了背景色并使刻度更厚以便查看。

＆＃13;

<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>

＆＃13;

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

1 个答案: