Question

我有一个YouTube iframe，其中div为兄弟姐妹。

我从this开始，一切都很棒。（标题可见，视频可点击）。

当我必须在transform div上添加css比例stripWrapper时问题就出现了： example。

正如您所看到的，这导致我的标题隐藏在YouTube视频背后。为了解决此问题，position: absolute; div在包装器z-index上导致标题可见，但现在视频无法点击。

当我缩小stripWrapper <div class="wrapper"> <div class="stripWrapper"> <div class="strip">I am a title</div> </div> <iframe width="80%" height="100%" class="myIframe" src="http://www.youtube.com/embed/JTMf40ORFE8?playsinline=1&controls=0" frameborder="0" allowfullscreen=""></iframe> </div>时，视频可点击但标题不可见：added

评论： 1. 80％的宽度只是因为我希望JSBin的“编辑”按钮可见 2.“stripWrapper”必须是100％高度

上次测试的代码：

HTML

.stripWrapper{
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom: 0;
    z-index: 10;
    -webkit-transform: scale(1.05);
}

.strip{
    position: absolute;
    top: 20px;
    left: 10px;
    width: 80%;
    background-color: green;
    z-index: 12;
    text-align: center;
    font-size: 18px;
    color: white;
}

.myIframe{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom: 0;
    width: 80%;
    height: 100%;
    border: 1px solid blue;
    z-index: 11;
}

CSS

{{1}}

修改：所有测试：

example（一切正常，无规模）
test1（添加了比例 - 隐藏了div）
test2（添加绝对位置 - 视频无法点击）
test3（更改了z-index - div再次隐藏）

Answer 1

检查出来只需要确保你缩放iframe并确保容器有位置：relative;

http://jsbin.com/wiluyiwire

CSS scale + position absolute的问题

1 个答案: