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标签中断开链接;其他链接工作

1 个答案: