問題
このように、親(div#filter
)と子(input
)が離れ離れになってしまいました。
子要素のinput
は90°回転してあります。(縦のスライドバーにするため)
親のdiv#filter
+少し写ってるwrap
で、position: sticky;
の連携がうまくいってるので
子要素のinput
を動かしたいのですが、何故か動きません…
今のdiv#filter
(親)がある位置にぴったりinput
(子)を置きたいです。
コード
html
1<div class="l-wrap"> 2 3 <div id="filter"> 4 <input type="range" name="page" orient="vertical" step="20" list="pagelist" /> 5 <datalist class="pagelist"> 6 <option value="1"></option> 7 <option value="2"></option> 8 <option value="3"></option> 9 <option value="4"></option> 10 <option value="5"></option> 11 </datalist> 12 </div> 13 14<!-- この間に他要素 --> 15 16</div>
css
1input[type=range]:focus { 2 outline: none; 3} 4#filter { 5 position: sticky; 6 position: -webkit-sticky; 7 top: 250px; 8 left: 57px; 9 width: 13px; 10 height: 196px; 11 float: left; 12} 13 14#filter input[type=range][orient=vertical] { 15 writing-mode: bt-lr; /* IE */ 16 -webkit-appearance: none; 17 width: 196px; 18 right: 250px; 19 bottom: 57px; 20 -webkit-transform:rotate(90deg); 21 -moz-transform:rotate(90deg); 22 -o-transform:rotate(90deg); 23 transform:rotate(90deg); 24} 25/* Chrome */ 26#filter input[type=range][orient=vertical]::-webkit-slider-runnable-track { 27 -webkit-appearance: none; 28 height: 13px; 29 background: url('../img/jiku.svg'); 30} 31#filter input[type="range"][orient=vertical]::-webkit-slider-thumb { 32 -webkit-appearance: none; 33 width: 30px; 34 height: 35px; 35 margin-top: -11px; 36 background: url('../img/botan.svg') no-repeat center center; 37} 38/* Firefox */ 39#filter input[type=range]::-moz-range-track { 40 height: 13px; 41 background: url('../img/jiku.svg'); 42} 43#filter input[type="range"]::-moz-range-thumb { 44 width: 30px; 45 height: 35px; 46 margin-top: -11px; 47 background: url('../img/botan.svg') no-repeat center center; 48} 49 50.l-wrap { 51 width: 100%; 52 height: 1421px; 53}
よろしくお願いします。
追記
ありがとうございます!
ちょっと位置がずれてたので transform-origin: bottom left;
にしたらものすごく惜しい所まできて、ここから少し上にしたいのですが left:
とか top:
で指定しても全く動きませんTT
もうちょっとなんですが、この微調整はどうやったら効きますか?
回答1件
あなたの回答
tips
プレビュー