如何使用z-index禁用iframe中的链接?

时间:2013-03-11 22:20:07

标签: css html5 iframe z-index

我在facebook标签上工作,其中包含显示其他网站内容的iframe。我已将iframe缩小到仅显示我想要的网站部分并禁用滚动。除此之外,我还要禁用iframe内容中的链接,并且我已经读过,应该可以通过向包含iframe的div添加透明的.png背景图片并设置iframe来实现#39; s z-index为-1,但iframe仍然在图像前面。

到目前为止,我的CSS看起来像这样:

<style type="text/css">

iframe
{

z-index:-1;
}

.bgimg {
background-image: url('transparent.png');
}


</style>

和我的html一样:

<div class="bgimg" style="overflow:hidden; width: 700px; height: 100%;margin:auto;">

<iframe src="http://www.url.com/site.html" width="1100" height="700" seamless="seamless" frameborder="0" scrolling="no" style="margin-top:-230px;"></iframe>

</div>

我用这个来直接链接到我的业余足球队的联赛桌,而不是每周手动更新标签所有新信息,但我不是希望能够点击每个团队获取团队信息 - 只需联盟表。

我已经阅读了几个应该可行的地方,但是还没有能够找到一个正常运行的代码 - 还读了一些地方说它不可能,还有一些人说它只能使用jQuery(我对此一无所知)来完成。

如果有人对我现在正在做的事情有任何其他解决方案 - 请告诉我。

1 个答案:

答案 0 :(得分:1)

请记住,z-index仅适用于定位元素(虽然可以是相对的。)

请参阅:http://www.w3.org/TR/CSS21/visuren.html#z-index

  

适用于:定位元素