プログレスバーがオフセットされているようです

Question

進捗バーにマイルストーンを表示するために行を追加しようとしていますが、完璧になるのに少し問題があります。常にオフセットがあるようだし、何が間違っているのか把握できない。下のプログレスバーは40％に設定されています。最初のマイルストーンは40％ですが、プログレスバーにも表示されていない場合は100になります。私はこれを正確にする方法が必要です。助言がありますか？

.progress-checkpoint { 
 
    float: left; 
 
    position: absolute; 
 
    background-color: red; 
 
    width: 1px; 
 
    height: 29px; 
 
    margin-top: -5px; 
 
    color: black; 
 
    overflow: visible; 
 
} 
 
.progress-checkpoint>div { 
 
    margin-left: -19px; 
 
    margin-top: -19px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div style="padding:50px"> 
 
    
 
    
 
    <div class="progress"> 
 
    <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><div class="progress-checkpoint" style="left: 40%;"> 
 
    <div>40</div> 
 
    </div><div class="progress-checkpoint" style="left: 53%;"> 
 
    <div>53</div> 
 
    </div><div class="progress-checkpoint" style="left: 67%;"> 
 
    <div>67</div> 
 
    </div><div class="progress-checkpoint" style="left: 88%;"> 
 
    <div>88</div> 
 
    </div><div class="progress-checkpoint" style="left: 100%;"> 
 
    <div>100</div> 
 
    </div>  </div> 
 
</div> 
 
    
 
    
 
    
 
    </div>

Answer 1

あなたのプログレスバーが正しく配置されます。問題は、あなたの.progress-checkpoint要素の絶対的な配置です。 にposition:relativeがありませんので、絶対位置が正しい点から始まります。

は、それはあなたがあなたのテキストマークが遮断されていないよう.progress要素からoverflow:hiddenを削除する必要があるほか

.progress { 
    position:relative; 
} 

を動作させるために、あなたのCSSに以下を追加します。