Li 元素的 iframe 问题答案

【问题标题】：Iframe Problems with the Li elementLi 元素的 iframe 问题
【发布时间】：2018-08-01 15:40:30
【问题描述】：

我刚刚遇到了 iframe 和其他元素的问题：

CSS：

body
{
    margin-right: 0px;
}

ul 
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(180, 180, 180);
    min-width: 750px;
    max-width: auto;
    border-top-left-radius: 35%;
    border-bottom-left-radius: 35%;
    position: relative;
    top: -25px;
}

li 
{
    float: left;
}

li a
{
    display: block;
    text-align: center;
    font-size: 25px;
    color: black;
    padding: 20px;
    text-decoration: none;
}

li a:hover 
{
    background-color: black;
    color: white;
}

iframe
{
    position: relative;
    top: -50px;
    z-index: -1;
    width: 1000px;
    height: 500px;
}

HTML：

<ul>
  <li class="leftcorn"><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Kontakt</a></li>
  <li class="rightcorn"><a href="#about">Über uns</a></li>
</ul>
<iframe src="iframe.html"></iframe>

我无法按下按钮，可能 iframe 上的 li 有问题但是我如何解决它才能正常工作？

我什么都试过了，但我不是很好，这对我来说只是一个爱好。 :)

【问题讨论】：

可以发一下 iframe 代码吗？

标签： html css iframe

【解决方案1】：

iframe 需要直接 url 来收集内容，以便其他人可以看到。 src="iframe.html" 对你的情况没有帮助，他们引用本地 index.html，它可以在你的机器上工作，但它对我们没有帮助吗？如果 iframe 存在于服务器（即 http://）上，我们可以提供帮助，否则我们无法看到您正在查看的内容。

【讨论】：

【解决方案2】：

另外，你有 z-index:-1;删除它，看看它是否有效

【讨论】：

是的，我知道它会起作用，但随后它将与家庭和公司重叠显示。

【解决方案3】：

如果你正在使用

    z-index: -1;

对于 iframe，它将不可点击，因为主体 z-index 会更大，因此不允许点击功能。将其视为堆栈，其顶部的项目的 z-index 越高。为 iframe 提供大于主体的 z-index 的 z-index 是一个好习惯。如果它们是有条件地呈现的。

【讨论】：