相対サイズの子要素を親要素の境界内に保持するにはどうすればよいですか？

Question

私はある範囲内の現在の位置を表示するために要素を使用する種類の「範囲表示」を持っています。例https://jsfiddle.net/juwxdb5m/または次のコードを参照してください。

HTML：

<h1>Range display with fixed sizes (works correctly)</h1> 
<div class="my-fixed-frame"> 
    <div class="my-fixed-chart"> 
    <div class="my-fixed-point" style="bottom:0%;left:0%;"></div> 
    <div class="my-fixed-point" style="bottom:50%;left:50%;"></div> 
    <div class="my-fixed-point" style="bottom:100%;left:100%;"></div> 
    </div> 
</div> 
<h1>Range display with relative sizes (works incorrectly)</h1> 
<div class="my-relative-frame"> 
    <div class="my-relative-chart"> 
    <div class="my-relative-point" style="bottom:0%;left:0%;"></div> 
    <div class="my-relative-point" style="bottom:50%;left:50%;"></div> 
    <div class="my-relative-point" style="bottom:100%;left:100%;"></div> 
    </div> 
</div> 

CSS：

.my-fixed-frame { 
    background-color: gray; 
    height: 90px; 
    position: relative; 
    width: 160px; 
} 

.my-fixed-chart { 
    background-color: silver; 
    display: inline-block; 
    bottom: 8px; left: 8px; right: 8px; top: 8px; 
    margin: auto; 
    position: absolute; 
} 

.my-fixed-point { 
    background-color: lime; 
    height: 16px; 
    margin-bottom: -8px; 
    margin-left: -8px; 
    position: absolute; 
    width: 16px; 
} 

.my-relative-frame { 
    background-color: gray; 
    height: 90px; 
    position: relative; 
    width: 160px; 
} 

.my-relative-chart { 
    background-color: silver; 
    display: inline-block; 
    bottom: 25%; left: 25%; right: 25%; top: 25%; 
    margin: auto; 
    position: absolute; 
} 

.my-relative-point { 
    background-color: lime; 
    height: 50%; 
    margin-bottom: -25%; 
    margin-left: -25%; 
    position: absolute; 
    width: 50%; 
} 

私は、固定サイズを使用する場合、必要に応じて、私はデザインを実装することができます。 「ポイント」要素は、そのフレーム内の親要素内にそれぞれ存在する。

しかし、子要素の相対サイズを使用すると解決策が見つかりませんでした。

Answer 1

希望通りに機能する解決策が見つかりました。https://jsfiddle.net/juwxdb5m/1/も参照してください。

HTML：

<h1>Range display with relative sizes</h1> 
<div class="range-display"> 
    <div class="range-cocoon"> 
    <div class="range-point" style="bottom:0%;left:0%;"></div> 
    <div class="range-point" style="bottom:33.333%;left:33.333%;"></div> 
    <div class="range-point" style="bottom:66.666%;left:66.666%;"></div> 
    <div class="range-point" style="bottom:100%;left:100%;"></div> 
    </div> 
</div> 

はCSS：一つのことについてよく

.range-display { 
    background-color: gray; 
    height: 90px; 
    position: relative; 
    width: 160px; 
} 

.range-cocoon { 
    background-color: silver; 
    bottom: 0; 
    height: 75%; 
    left: 0; 
    position: absolute; 
    width: 75%; 
} 

.range-point { 
    background-color: lime; 
    height: 33.333%; 
    position: absolute; 
    width: 33.333%; 
} 

Answer 2

たぶんこれが何をしたいです：

https://jsfiddle.net/xoq95xaa/

主な変更点は、私はあなたがこの種の最初のバージョンでは、負のマージンを使って何をしたかである内側容器（外の緑の四角を取ったということです（コメントに反応する）4つの要素を挿入し、幅と高さを25％に変更し、bottomとleftの値を25％ステップ（0,25,50,75）に変更しました。