Question

我有一个视频，我想在iFrame上播放，然后在完成后将其删除，但我无法将视频显示在iframe上方。它有一些技巧吗？我已经尝试过CSS z-index，但它没有帮助。我有这样的代码：

    html, body, .container {
    height: 100%;
}
.container {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
}

#game {
    z-index: 1;
}

#video {
    z-index: 2;
}

一个CSS文件：

def onchange_first_last(self, cr, uid, ids, place, assetmodelid_add, context=None):
    v = {}
    assetmodelid_val=''
    place_val=''
    place_obj=self.pool.get('asset.parentlocation')
    assetmodelid_obj=self.pool.get('agile.portfolio1')

    if assetmodelid_add:
        assetmodelid_val = assetmodelid_obj.browse(cr, uid, assetmodelid_add, context=None).name
    if place:
        place_val = place_obj.browse(cr, uid, place, context=None).name

    v['folio_num'] = assetmodelid_val + place_val
    return {'value': v}

为什么它不起作用，如何让视频显示在iframe之上？

Answer 1

对子元素使用position: absolute;，在父元素上使用position: relative;。

.container {
    position: relative;
}
iframe {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

z-index要求将位置设置为相对，绝对或固定。通过使用绝对位置，您可以将元素放在下一个元素中的位置相对的树上，在这种情况下.container

示例jsfiddle shows this in action

分层iframe和视频

1 个答案: