当我打开 html 文件但在 CODEPEN 上它可以工作时，我的按钮不起作用？答案

【问题标题】：My button doesn't work when I open the html file but on CODEPEN it works?当我打开 html 文件但在 CODEPEN 上它可以工作时，我的按钮不起作用？
【发布时间】：2017-04-20 20:34:13
【问题描述】：

我想知道当我对网页上的按钮进行测试时，它可以在 codepen 预览和 JSFIDDLE 上运行，但在我打开同一网页的 html 文件时却不行？

CODEPEN 可编辑链接

在这里它可以工作，如果您下载代码并在打开 html 文件时将其导出为 .zip，它将无法工作。 Codepen editable preview

预览 2

这是上面显示的可编辑预览中相同代码的预览，它在可编辑预览中有效，但在此处的预览中无效？这就像我在 html 文件上打开它一样。 preview2 resemblance of how the button doesn't work when I open html file

JSFIDDLE 视图

这是一个JSFIDDLE of button，它的工作方式类似于上面的可编辑代码笔链接，但在相似链接中它不能工作完全相同的代码。

我正在重置浏览器，使用不同的浏览器（safari、chrome 和 firefox）和带有操作系统（macOS 和 Windows 10）的不同计算机系统。

按钮代码html

<div class="container text-center">
    <a href="../HTML%20web%20pages/About%20Me.html" target="_parent"><button>Find out more about me</button></a>
</div>

如果有人说由于他们没有文件而导致按钮不起作用，请将链接替换为 vlid 工作 html 网页链接，结果仍然与可编辑的 codepen 视图和 jsfiddle 上的相同，但不是preview2 是上面的相似链接。

我的 H1 元素似乎掩盖了我的按钮。

【问题讨论】：

检查了您的控制台...？不安全的 JavaScript 尝试从 URL 为“stacksnippets.net/js”的框架启动对 URL 为“stackoverflow.com/questions/43516768/…”的框架的导航。尝试导航顶级窗口的框架是沙盒的，但未设置“allow-top-navigation”标志。
@deceze 那是因为 OP 设置了target=_parent，如果将其删除，它将起作用。
@Jones Soo……你发现了问题……？！ :)
@deceze 不，我用:p。但我确实理解控制台中的错误。

标签： html css

【解决方案1】：

这是因为您的<a> 元素在<h1> 元素后面，给<a> 元素赋予以下样式，那么它应该可以工作：

a {
    color: #337ab7;
    text-decoration: none;
    position: relative;
    z-index: 99999;
}

【讨论】：

【解决方案2】：

这是因为您的一个 H1 元素覆盖了您的按钮，您可以将 z-index 设置为您的按钮，但最好将您的 HTML 布局调整为正确的结构。

【讨论】：