应该在视频之上的元素在视频之下答案

【问题标题】：Elements that should be above video is under video应该在视频之上的元素在视频之下
【发布时间】：2020-08-27 18:26:55
【问题描述】：

https://codepen.io/smellypotato/pen/jObKOEx

<style>
  #videoSlider {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    left: 50%;
    bottom: 4%;
    width: 96%;
    height: 3%;
    background: #888888;
    outline: none;
    border-radius: 10px;

  }

  #videoSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 50px;
    background: #CCCCCC;
    border-radius: 50%;
  }
  #videoSlider::-moz-range-thumb {
    width: 50px;
    height: 50px;
    background: #CCCCCC;
    border-radius: 50%;
  }
</style>
<div style="width: 1180px; height: 664px; overflow: hidden; transform-origin: left top; position: absolute; transform: scale(0.32563405797101447, 0.32563405797101447) rotate(90deg); left: 344.5244565217391px;" id="videoBox">
<video autoplay="true" muted="true" display="none" webkit-playsinline="true" playsinline="true"id="" style="width: 100%; height: auto; top: 5%;" touch-action="none" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video>
<input type="range" min="0" id="videoSlider" max="42.077">
</div>

在 codepen 链接中，我有一个包含视频和范围输入的外部 div。外层 div 旋转 90 度（用于移动设备的特定用途，无法更改），溢出设置为隐藏（因为视频可以放大但需要将其保留在 div 内，因此也无法更改）。视频的大小与外层 div 相同，范围输入的宽度与外层 div 相同。

问题：为什么视频上方没有显示范围输入？如果您打开检查器并删除视频，您可以看到范围输入在正确的位置（或者您可以突出显示范围输入以查看其位置）

我测试过的：

任何放在视频顶部的元素都具有相同的效果（例如 div、input）
溢出：隐藏的影响。如果其他属性保持不变，将溢出：隐藏更改为其他值或简单地删除溢出：隐藏将显示范围输入正常
旋转（90 度）影响。如果其他属性保持不变，删除 rotate(90deg) 将显示范围输入正常。将 deg 更改为 -47 到 70deg 也可以显示范围输入。

我找到了解决此问题的替代方法，但我想知道为什么会发生这种情况

【问题讨论】：

标签： html css

【解决方案1】：

所以您的溢出应该是可见的，并且您需要在#videoSlider 中使滑块的位置相对。

 #videoSlider {
    -webkit-appearance: none;
    bottom: 5%;
    width: 100%;
    height: 3%;
    background: #888888;
    outline: none;
    border-radius: 10px;
   position: relative;
  }

  #videoSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 50px;
    background: #CCCCCC;
    border-radius: 50%;
  }
  #videoSlider::-moz-range-thumb {
    width: 50px;
    height: 50px;
    background: #CCCCCC;
    border-radius: 50%;
  }

&lt;div style="width: 1180px; height: 664px; overflow: visible; transform-origin: left top; position: absolute; transform: scale(0.32563405797101447, 0.32563405797101447) rotate(90deg); left: 344.5244565217391px;" id="videoBox"&gt;&lt;video autoplay="true" muted="true" display="none" webkit-playsinline="true" playsinline="true"id="" style="width: 100%; height: auto; top: 5%;" touch-action="none" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"&gt;&lt;/video&gt;&lt;input type="range" min="0" id="videoSlider" max="42.077"&gt;&lt;/div&gt;

【讨论】：

我不是说溢出一定要隐藏吗？