html - 仅单个 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 元素根据它们在页面源中出现的顺序堆叠；后面的元素放在前面的元素之上。

解决这个问题的最简单方法是设置更高的 z-index在右上角。

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

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