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

Question

我正在开发一个包含 iframe 的 facebook 选项卡，该 iframe 显示来自另一个网站的内容。我已经将 iframe 缩小到只显示我想要的网站部分并禁用滚动。除此之外，我想禁用 iframe 内容中的链接，我读到应该可以通过将透明的 .png 背景图像添加到包含 iframe 的 div 并将 iframe 的 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 来完成(我对此一无所知)。

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

Answer 1

请记住，z-index 仅适用于定位元素(尽管可以是相对的。)

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

Applies to: positioned elements