HTMLで要素が上にあるのに透けて見えるのはなぜでしょうか？

timepicker

上記のサイトのTimePickerですが
時計ボタンを押すとリスト表示され、現在選択している部分が白く表示されています。

この白表示はどのように実現しているのでしょうか？

DeveloperツールでCSSの内容をみるとk-time-highlightクラスが付与された要素のようですが
この要素はOpacityなど透過設定など設定されていないにも関わらず、下の要素の内容が透過し表示されています。

尚、リスト表示はフォーカスが外れると消えてしまうので、確認にはChrome DeveloperToolで以下を行う必要ようがあります。

DeveloperToolをFloating表示にする
時計ボタンを右クリック → 検証 (ctrol + shit + I)
$0.click()を実行

行動規範の内容に同意します

回答1件

ベストアンサー

下の要素の内容が透過し表示されています。

「下の要素」というのは、時や分を示す数字の部分のことだと思いますが、z-index的には、白帯が1で、数字の部分は10なので、実は、数字の方が手前に来てるのではないでしょうか。

css
1.k-time-highlight {
2    position: absolute;
3    top: 50%;
4    left: 0;
5    right: 0;
6    -webkit-transform: translateY(-50%);
7        -ms-transform: translateY(-50%);
8            transform: translateY(-50%);
9    width: 100%;
10    height: calc(1.4285714286em + 8px);
11    z-index: 1;
12    border-width: 1px 0;
13    border-style: solid;
14    border-radius: .1px;
15}
16
17.k-time-list {
18    position: absolute;
19    display: -ms-flexbox;
20    display: flex;
21    z-index: 10;
22    outline: 0;
23    bottom: 0;
24    right: 0;
25    left: 0;
26    top: 0;
27}