HTML <A href> 链接到另一个页面不起作用答案

【问题标题】：HTML <A href> link to another page does not workHTML <A href> 链接到另一个页面不起作用
【发布时间】：2021-03-16 02:59:57
【问题描述】：

我正在尝试链接两个页面，index.html 和professionals.html。它们具有完全相同的代码，只是搜索栏中的占位符不同，而且导航链接明显不同。它们也在同一个文件夹中，并且链接到同一个 css。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <title>Group A93 Final Project</title>
</head>
<body>
    <div class="navlink">
    <header>
        <nav>
             <a href="professors.html"> Search by Professor</a>
        </nav>
        </header>
    </div>
    <div class="wrapper">
        <div class="container, flex-outer">
            <div class="header">
                <h1>University of Maryland class and Professor Database</h1>
                <img src="https://cdn.freebiesupply.com/logos/thumbs/2x/university-of-maryland-logo.png" alt="UMD Logo">
            </div>
            
            <div class = "search-bar">
                <input type="text" class="textInput" placeholder="Enter Course"></input>
                <button
                id="search_button" class = "search_button" name="search_button" type="submit">
                    Search
                  </button>
            </div>
            <div class="navWrapper">
                <ul class="suggestions"></ul>
            </div>
        </div>
    </div>

    <script src="scripts.js"></script>
</body>
</html>

professors.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <title>Group A93 Final Project</title>
</head>
<body>
    <div class="navlinke">
        <header>
            <nav>
                 <a href="index.html"> Search by Course Name</a>
            </nav>
            </header>
        </div>
    <div class="wrapper">
        <div class="container, flex-outer">
            <div class="header">
                <h1>Final Project</h1>
            </div>
            <div class = "search-bar">
                <input type="text" class="textInput" placeholder="Enter Professor"></input>
                <button
                id="search_button" class = "search_button" name="search_button" type="submit">
                    Search
                  </button>
            </div>
            <div class="navWrapper">
                <ul class="suggestions"></ul>
            </div>
        </div>
    </div>

    <script src="scripts.js"></script>
</body>
</html>

css

 body{
     background-color: rgb(255, 252, 104);
 }

 h1 {
    color: #2a2a2a;
    font-size: 40px;
    text-align: center;
    font-weight: 80;
  }
  nav {
 
    z-index: 5;

}

  .header > img {
    width: 20%;
    height: 30%;
    left: 5px;
    right: 10px;
    position:absolute; 
      top:-40px; 
      left:0; 
}

 .textInput {
    flex-wrap: wrap;
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    justify-content: space-between;
    width: 600px;
    height: 40px;
    margin: 0 auto;
    border-radius: 5px;
  }
  
  .search-bar > button{
    align-items: center;
    left: 955px;
    top:165px; 
    position:absolute; 
    border-radius: 50%;
    background-color: white;

  }

  button:hover {
    background-color: #eb2f00;
    color: white;
  }

非常令人沮丧的是该链接在professionals.html 网站上有效，但在index.html 页面上无效。我需要他们同时处理这两个问题。当我通过检查元素而不是页面本身单击 index.html 上的链接时，该链接有效。当我拿走css时，index.html上的链接有效，但我显然需要css。这是非常令人困惑和令人沮丧的，因为两个 html 完全相同，但它在 index.html 上不起作用。我不知道该怎么做。

【问题讨论】：

标签： html hyperlink href

【解决方案1】：

发现的问题：index.page 中的链接位于图片后面。图像“阻止”光标访问链接或隐藏链接以防止访问。

我的建议是将 position:sticky 和 z-index:100px 添加到导航栏或给链接一个 id 然后为其分配上述 css 属性。

/*Note: Using position:sticky on the whole navbar may alter how the navbar displays*/
nav {
  position: sticky;
  z-index: 1000px; /* A high z-index will ensure the link is always on top */
}

或

/* Give the link an id or class*/
#link {
  position: sticky;
  z-index: 1000px; /* A high z-index will ensure the link is always on top */
}

根据您希望链接的放置方式使用 position 属性。

Css 专家：欢迎提出更好的建议。我还没有，但我已经多次遇到这个问题，这就是我解决它的方法

【讨论】：

无论我将 z 索引设为多大，链接仍然被掩盖
@DimejiOlayinka 您是否包含位置：粘在链接上？因为没有位置那么它仍然会落后