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缩放时所处的位置，因为当iframe不缩放时，问题就不存在了；但是，当我尝试以下操作时：

position: static;

... css不执行任何操作。

---

图像

导航栏关闭

导航栏打开

Answer 1

您可以通过对导航内容应用position: relative;和z-index: 1;来使导航内容与图像重叠：

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