固定高さDIVがパーセンテージTOP値を使用していない

Question

ページロード時にさまざまな色のキーワードを自動的に強調表示するためのJavaScriptツール（ブラウザアドオンではない）を作成しています。各結果がどこにあるかを示すページのスクロールバー。

マイ結果のHTMLコードは、これまでのようになります。私は、実行時にスタイルデータを生成することだし、これらの要素に影響を与える任意のCSSルールを持っていない

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

注意。そして、はい、私は3回チェックしました。

今のところ、「チック」は表示されず、代わりにそのコンテナの上部にぶら下がっています。

はい、私はすでにここで答えを見つけようとしましたが、いずれもブラウザのウィンドウでコンテナを拡大することができないようにこのケースをカバーしているようです。

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>