iframe 内的图像重新调整了封面导航

Question

我尝试使用这个 css 类减小我网站上的 iframe 内的图像大小：

@media screen and (max-widht: 1000px) {
    .class-name {
        transform: scale(0.5);
        transform-origin: 0 0;
        width: 195%;
    }
}

唯一的问题是它覆盖了我的导航。

我正在使用此 YouTube 视频中的导航：https://www.youtube.com/watch?v=gXkqy0b4M5g

问题可能是 iframe 在缩放时获得的位置，因为如果不是，则问题不存在；但是，当我尝试以下操作时：

position: static;

...css 什么都不做。

---

图片

导航栏关闭

导航栏打开

Answer 1

您可以通过将position: relative; 和z-index: 1; 应用于导航内容来使导航内容覆盖图像：

.navigation-content {
    ...
    position: relative;
    z-index: 1;
    ...
}