Question

我想知道当我在我的网页上对我的按钮进行测试时，它适用于codepen preview＆amp; 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 VIEW

这是一个JSFIDDLE of button，其工作方式与上面的可编辑codepen链接类似，但在相似性链接中，它不能使用相同的代码。

我重置了浏览器，使用不同的浏览器（safari，chrome＆amp; firefox）＆amp;具有OS的不同计算机系统（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网页链接替换链接＆amp;结果仍然与它在可编辑的codepen视图和＆amp; jsfiddle但不是上面的相似性链接的preview2。

好像我的H1元素掩盖了我的按钮。

Answer 1

这是因为您的<a>元素位于<h1>元素后面，为<a>元素提供以下样式，然后它应该有效：

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

Answer 2

之所以发生这种情况是因为您的某个H1元素覆盖了您的按钮，您可以将z-index设置为您的按钮，但最好将HTML的布局设置为正确的结构。

当我打开html文件时，我的按钮不起作用，但在CODEPEN上它有效吗？

2 个答案: