当我使用position: relative, top:45px, left:900px;在.nav a{}中，我的超链接变成了一个正常的文本，但如果我省略了那部分，它会像预期的那样工作，那就是一个链接。不能弄清楚如何解决这个问题，我不改变它的位置，但想使超链接的工作以及。我试着使用float:right属性，但仍然发生了同样的事情，我无法点击它。
预期结果:即使我在CSS中使用position: relative, top, left属性，我的超链接作为一个链接，当我点击它时，它会将我重定向到所需的页面，但我面临的问题是，当我使用这些属性时，超链接变成只是文本，我不能点击它，它们显示为文本而不是链接，这将重定向到某个页面。
这是我的HTML和CSS代码:.nav li{
display: inline;
padding: 10px;
}
.nav{
background-color: black;;
padding: 7px;
}
.nav a{
text-decoration: none;
color: black;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
position: relative;
left: 900px;
top: 45px;
}
#heading h1{
text-align: left;
position: relative;
top: -20px;
left: 145px;
margin-right: 200px;
color: teal;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
img{
position:relative;
width: 60px;
top: -90px;
left: 80px;
}
body{
margin: 0;
padding: 0;
}
#navbar li:hover{
text-shadow: teal;
}
#jumbo{
background-image: url('https://cdn.pixabay.com/photo/2018/03/21/07/16/learning-3245793_960_720.jpg');
min-height: 300px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;position: relative;
top: -90px;
}{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/Home.css' %}">
<title>Science Professor</title>
</head>
<body>
<div id="navbar">
<div class="nav">
<li><a href="{% url 'topic' %}">Topics</a></li>
<li><a href="{% url 'publish' %}">Article</a></li>
<li><a href="{% url 'contact' %}">Contact</a></li>
<li><a href="{% url 'about' %}">About</a></li>
</div>
</div>
<div id="heading">
<h1>Science Professor</h1>
</div>
<img src="https://www.nfscars.net/media/accounts/2017/01/23/photo.jpg" alt="">
<section id="jumbo">
</section>
</body>
</html>这只是为重叠元素使用正确的z-index的问题。虽然可以有更好的实现方式，但我已经将z-index设置在<a>标签和<h1>标签上，使<a>标签具有更高的z-index，然后h1标签。
现在链接是可点击的。
.nav li{
display: inline;
padding: 10px;
}
.nav{
background-color: black;;
padding: 7px;
}
.nav a{
text-decoration: none;
color: black;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
position: relative;
left: 900px;
top: 45px;
z-index: 10;
}
#heading h1{
text-align: left;
position: relative;
top: -20px;
left: 145px;
margin-right: 200px;
color: teal;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
z-index: 1;
}
img{
position:relative;
width: 60px;
top: -90px;
left: 80px;
}
body{
margin: 0;
padding: 0;
}
#navbar li:hover{
text-shadow: teal;
}
#jumbo{
background-image: url('https://cdn.pixabay.com/photo/2018/03/21/07/16/learning-3245793_960_720.jpg');
min-height: 300px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;position: relative;
top: -90px;
}{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/Home.css' %}">
<title>Science Professor</title>
</head>
<body>
<div id="navbar">
<div class="nav">
<li><a href="{% url 'topic' %}">Topics</a></li>
<li><a href="{% url 'publish' %}">Article</a></li>
<li><a href="{% url 'contact' %}">Contact</a></li>
<li><a href="{% url 'about' %}">About</a></li>
</div>
</div>
<div id="heading">
<h1>Science Professor</h1>
</div>
<img src="https://www.nfscars.net/media/accounts/2017/01/23/photo.jpg" alt="">
<section id="jumbo">
</section>
</body>
</html>