DIV с фиксированной высотой, не использующие значения процента-TOP

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>