css - IE10 and IE9 z-index issue with iframes

Question

I have the following 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>

And the following 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;
}

My problem is that the anchor tag is appear behind the iframe. I've tried changing the z-index but that hasn't worked. Does anyone know what CSS rules I need to apply to the anchor to get it to appear on top of the iframe?

Answer 1

如果你左右切换<a>，<iframe>你就不需要 z-indexes。

<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>

小提琴