我正在尝试链接两个页面，index.html和professors.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;
}
非常令人沮丧的是，链接在professors.html网站上有效，但在index.html页面上无效。我需要他们同时处理这两个问题。当我通过inspect元素点击index.html上的链接时，它就起作用了，但在页面本身却不起作用。当我去掉css时，index.html上的链接可以工作，但我显然需要css。这是非常令人困惑和沮丧的，因为两个html完全相同，但它在index.html上不起作用。我不知道该怎么办。
发现的问题：index.page中的链接在图像后面。图像"阻止"光标访问链接或隐藏链接以阻止访问。
我的建议是在导航栏中添加position:stick和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专家：欢迎更好的建议。我还不是一个，但我已经遇到了很多次这个问题，这就是我解决它的方法