只有单个 HTML div 标签中的链接断开；其他链接有效答案

【问题标题】：Broken links in only single HTML div tag; other links work只有单个 HTML div 标签中的链接断开；其他链接有效
【发布时间】：2017-09-19 17:56:15
【问题描述】：

为什么我在 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;
}

【问题讨论】：

链接工作正常。你遇到了什么错误？
@disinfor 右上角的链接在任何浏览器上都不适合我。（手册、主页、站点地图和站点索引链接）。你能确认这些工作对你有用吗？
您的 HTML 看起来已损坏。所有标签都在中。您可能在某处缺少结束标签。标题位于链接的顶部。
@Turnip 不，它没有坏。这只是 HTML 代码的一部分。
标签只能在标签内使用，所以是的，您的 HTML 已损坏。

标签： html css markdown jekyll github-pages

【解决方案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，所以它出现在源代码中的位置并不重要，但它会更改制表符顺序，所以这可能是不可取的。

【讨论】：