html - 高级 CSS - 不理解这个解决方案

Question

多亏了这个 SO answer，我已经成功地获得了一个视频以正确地放入一个 div 中并一直完全填充它.

我稍微修改了代码，但我对这段代码为何有效感到困惑。

    video
        position: absolute
        opacity: 0.1
        z-index: 0
        top: 0px
        left: 50%
        min-width: 100%
        min-height: 100%
        right: 0px
        margin: auto
        width: auto
        height: auto
        overflow-x: hidden
        transform: translateX(-50%)

我不明白转换的作用以及如何将其固定到左上角以外的其他地方。我认为有关 min- 属性的一些东西使这项工作有效，但我不确定。

Answer 1

绝对定位元素相对于其父元素(也可以是浏览器窗口)的位置由 top 或 bottom 和 left 或 right 参数定义(默认为 top: 0; left: 0;)。如果 left 为 50%，则表示左边框正好移动到容器的水平中间。 transform: translateX(-50%) 将它向左移动 50%(由负值引起)，但这次是元素本身的 50%。这会导致元素水平居中。 overflow-x: hidden; 确保元素不会与其容器重叠 - 溢出的部分将保持不可见。

你可以用 top 50% 在垂直方向上做同样的事情；变换:翻译Y(-50%)；溢出-Y:隐藏；