1

のシャドウDOM要素のCSSを編集していてinput[type=range]、スライダーのつまみを拡張して下のdivをカバーしたいのですが、これを行うにpositionは、つまみのをに設定する必要がありfixedます。問題は、親指の下に配置する必要がある下のdivに、親指をposition: relative覆って前景に配置されている（そして別の位置に配置できない）divがいくつかあることです。

これがコードです。しかし、私は自分の問題をよりよく説明するためにjsFiddleを作成しました。

HTML

<input type="range" id="slider" />
<div id="container">
    <div id="left"></div>
    <div id="right">
        <div id="content"></div>
    </div>
</div>

CSS：

#slider {
    width: 400px;
    -webkit-appearance: none;
    background: red;
    height: 30px;
}

#slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 85px;
    background: black;
    position: fixed;
    top: 10px;
    left: 120px;
}

#container {
    width: 400px;
}

#left {
    width: 100px;
    height: 50px;
    background: blue;
    float: left;
}

#right {
    background: green;
    width: 300px;
    height: 50px;
}

#content {
    position: relative;
    width: 50px;
    height: 25px;
    background: yellow;
    left: 100px;
    top: 10px;
}

基本的に、position: relativeそのdivからプロパティを削除せずに、黒いバーが黄色のdivをカバーするようにします。それは可能ですか？

4

2 に答える 2

1

z-index以外の位置にある要素の自然な積み重ね順序を変更するには、を指定する必要がありますstatic。

そこで、z-indexここに1の値を追加しました。

#slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 85px;
    background: black;
    position: fixed;
    top: 10px;
    left: 120px;
    z-index: 1;
}

ここであなたのフィドルをフォークしました。

于 2013-02-26T14:21:43.500 に答える
0

相対的な位置を設定することは私のために働いた。

問題のあるCSSを開始する

    input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 30px;
  width: 15px;
  border-radius: 0px;
  background: #004687;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -0.2px;
  z-index:5;
}

cssの終了：

        input[type=range]::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
      border: 0px solid #000000;
      height: 30px;
      width: 15px;
      border-radius: 0px;
      background: #004687;
      cursor: pointer;
      -webkit-appearance: none;
      margin-top: -0.2px;
      z-index:5;

  position:relative;
}
于 2015-04-30T19:51:06.083 に答える