仅单个 HTML div 标签中的损坏链接；其他链接有效

Question

为什么我在 Github 页面上托管的网站的一个部分中出现损坏的链接？网站是 lanl.github.io/LaGriT 。 HTML 布局文件的相关部分如下所示：

<div id="top_right">
   <a href="https://lanl.github.io/LaGriT/"> Home </a> <br>
    <div class="grid" id="searchBar">
          <div>
              <div id="search">
                  <form role="search" method="get" action="{{ site.baseurl }}//pages/search">
                      <input id="searchString" name="searchString"
                             placeholder="Enter text here" type="text">
                      <input id="searchButton" name="googleSearchName" type="button" value="Search">
                  </form>
              </div>

          </div>
    </div>
</div>

CSS 文件的相应部分如下所示：

#top_right {
    position:absolute;
    top:20px; right:200px;
    width:400px;
    background:#000;
}

Answer 1

如果您使用浏览器的开发人员工具并检查一些元素，您会看到 <div id="header_wrap"> 覆盖（位于）<div id="top_right">。

DOM 元素根据它们在页面源中出现的顺序堆叠；后面的元素放在前面的元素之上。

最简单的解决方法是在 top_right 上设置更高的 z-index。

#top_right {
    position: absolute;
    top: 20px;
    right: 200px;
    width: 400px;
    background: #000;
    z-index: 100;     /*  <-----  */
}

您还可以更改元素声明的顺序，例如将您的 top_right div 放在 HTML 的 end源，因此它位于 z-index 堆栈的顶部。由于您使用的是 position: absolute，因此它出现在源代码中的位置无关紧要，但它将更改 Tab 键顺序，因此这可能是不可取的。

仅单个 HTML div 标签中的损坏链接；其他链接有效

Broken links in only single HTML div tag; other links work

html

css

markdown

jekyll

github-pages