なぜjsコードが部門を分けるのですか？

Question

次のコードでは、jsコードは進行状況バーにアニメーション負荷を与えると想定されています。しかし、黄色のバーがずれていると、あなたは自分のSVGでのCSSプロパティposition: absolute;が欠落している

// progressbar.js@1.0.0 version is used 
 
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/ 
 

 
var bar = new ProgressBar.Line(container, { 
 
    strokeWidth: 4, 
 
    easing: 'easeInOut', 
 
    duration: 1400, 
 
    color: '#FFEA82', 
 
    trailColor: '#eee', 
 
    trailWidth: 1, 
 
    svgStyle: { 
 
    width: '100%', 
 
    height: '100%' 
 
    } 
 
}); 
 

 
bar.animate(1.0); // Number from 0.0 to 1.0

#liner { 
 
    position: relative; 
 
    width: 600px; 
 
    height: 7px; 
 
    background-color: #000000; 
 
} 
 
#container { 
 
    position: absolute; 
 
    width: 400px; 
 
    height: 8px; 
 
    background-color: #f0f0f0; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script> 
 
<div id="liner"> 
 
    <div id="container"></div> 
 
</div>

Answer 1

を右に配置されていない理由を知りません。

---

jsFiddle Demo

---

コードスニペット： `VARバー=新しいプログレスバー：

var bar = new ProgressBar.Line(container, { 
 
    strokeWidth: 4, 
 
    easing: 'easeInOut', 
 
    duration: 1400, 
 
    color: '#FFEA82', 
 
    trailColor: '#eee', 
 
    trailWidth: 1, 
 
    svgStyle: { 
 
    width: '100%', 
 
    height: '100%', 
 
    position: 'absolute' 
 
    } 
 
}); 
 

 
bar.animate(1.0); // Number from 0.0 to 1.0

#liner { 
 
    position: relative; 
 
    width: 600px; 
 
    height: 7px; 
 
    background-color: #000000; 
 
} 
 
#container { 
 
    position: absolute; 
 
    width: 400px; 
 
    height: 7px; 
 
    background-color: #f0f0f0; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script> 
 
<div id="liner"> 
 
    <div id="container"></div> 
 
</div>