對齊<svg><rect>的<input>

我有一大堆的<input>滑塊，與DOM看起來是這樣的 -對齊<svg><rect>的<input>

<div> 
    <label style="width:100px">Slider A: </label> 
    <input type="range" style="width:600px; height:20px;"/> 
    <svg width="600px" height="20px"> 
    <rect x="0" y="0" width="300" height="20"></rect> 
    </svg> 
</div>

我想svg矩形突出輸入的部分，讓我們說開始在左邊，在這個例子中恰好在中間結束，但其他範圍也是可能的。

我該如何確定svg的位置，使其與input重疊？

來源

2016-03-08 KalEl

總的來說......我會說你採取了錯誤的做法。請參閱*評論* [此處]（http://stackoverflow.com/a/18389801/1860561）中Ales提供的小提琴。如果你需要使用SVG，你可能需要使用相對/絕對定位。 – gitsitgo

經過一番研究，我得到了答案。張貼在任何人遇到此情況。

基本上爲容器div定義高度/寬度，併爲需要重疊的div設置style =「position：absolute」。

來源

2016-03-08 21:11:36 KalEl

不要忘記在容器元素上添加'position：relative'，因爲絕對定位div可能會在奇怪的地方結束 –

對齊<svg><rect>的<input>

回答

相關問題