Question

我有以下HTML

<div id="lightbox" style="width: 60%; height: 60%; top: 91px; left: 323.5px; display: block;">
    <a href="" class="close" onclick="closeLightbox(event);">Close</a>
    <iframe id="ytplayer" type="text/html" height="100%" width="100%" src="http://www.youtube.com/v/9ZrK8aMrQu4?rel=0&amp;hl=en_GB&amp;controls=1&amp;showinfo=0&amp;wmode=opaque" frameborder="0"></iframe>
</div>

以下CSS

#lightbox
{
    display: none;
    position: fixed;
    padding: 10px;
    background: #ffffff;
    z-index: 101;
}

#lightbox .close
{
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 5px;
    background: #ffffff;
    z-index: 99999;
}

我的问题是锚标签出现在iframe后面。我试过改变z-index但是没有用。有谁知道我需要将哪些CSS规则应用于锚点以使其显示在iframe之上？

Answer 1

如果您切换<a>和<iframe>，则不需要z索引。

<div id="lightbox" style="width: 60%; height: 60%; top: 20px; left: 20px; display: block;">
    <iframe id="ytplayer" type="text/html" width="100%" height="100%" src=""></iframe>
    <a href="" class="close" onclick="closeLightbox(event);">Close</a>
</div>

Fiddle

iframe的IE10和IE9 z-index问题

1 个答案: