超链接不工作。我认为css有一些问题。有人能忽略并帮助解决这个问题吗？
*{
margin: 0;
padding: 0;
font-family: 'Dongle', sans-serif;
}
.header{
min-height: 70vh;
width: 100%;
background-position: center;
background-size: cover;
}
nav{
display: flex;
padding: 1% 1%;
justify-content: space-between;
align-items: center;
}
nav img{
width:140px;
height: 80px;
}
.nav-bar{
flex: 1;
text-align: right;
}
.nav-bar ul li{
list-style: none;
display: inline-block;
padding:8px 12px;
}
.nav-bar ul li a{
color: aquamarine;
text-decoration: none;
font-size: 33px;
}
.start-1{
width: 100%;
color: #fff;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
padding-left: 1%;
}
.start-1 h1{
font-size: 50px;
text-align: left;
padding-top: 15%;
}
.start-1 p{
margin: 10px o 40px;
padding-right: 1%;
text-align: left;
font-size: 18px;
color: #fff;
font-family: monospace;
}
.table{
padding-left:2% ;
font-family: monospace;
font-size: 28px;
}
body{
background-image: url(webimages/india.jpg);
background-position: center;
background-size: cover;
position: relative;
width: 100%;
}<html>
<head>
<title>HOME PAGE</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dongle:wght@300;400&display=swap" rel="stylesheet">
</head>
<body>
<section class="header">
<nav>
<a href="index.html"><img src="webimages/logo.jpg" alt="LOGO"></a>
<div class="nav-bar">
<ul>
<li><a href="index.html"><u>HOME</u></a></li>
<li><a href="ABOUT US.html"><u>ABOUT US</u></a></li>
<li><a href="CONTACT US.html"><u>CONTACT US</u></a></li>
<li><a href="DONATE PAGE.html"><u>DONATE</u></a></li>
</ul>
</div>
</nav>
<div class="start-1">
<strong><h1>CO <sub>2</sub> and Greenhouse Gas Emissions Country Profiles</h1></strong>
<p>How are emissions changing in each country? Is your country making progress on reducing emissions? We built 4 country profiles which allow you to explore the statistics for the top polluting countries. Each profile includes interactive visualizations, explanations of the presented metrics, and the details on the sources of the data.</p>
</div>
</section>
<section>
<ol class=table>
<h3 > Every profile includes five sections</h3>
<li> CO2 emissions: How much does a country emit each year? What is the average emissions per person? How much has it emitted over time? How do emissions compare when we correct for trade?</li>
<li>Coal, oil, gas, cement: How much CO2 comes from coal, oil, gas, flaring or cement production?</li>
<li>Other greenhouse gases: How much total greenhouse gases does each country emit? How much methane, and nitrous oxide is emitted?</li>
<li>Emissions by sector: Which sectors contribute most to emissions? Does transport contribute more or less than electricity; how large are agriculture and land use emissions?</li>
<li>Carbon and energy efficiency: How much energy do we use per unit of GDP? How much carbon do we emit per unit of energy?</li>
</ol>
</section>
</body>
</html>超链接不起作用。我认为css有一些问题。有人能忽略并帮助解决这个问题吗？
类名为start-1的容器有一个position: absolute;，并且与导航重叠。在该类上添加一个z-index: -1;，将其移动到页面的后面。请查看该片段以供参考。
* {
margin: 0;
padding: 0;
font-family: 'Dongle', sans-serif;
}
.header {
min-height: 70vh;
width: 100%;
background-position: center;
background-size: cover;
}
nav {
display: flex;
padding: 1% 1%;
justify-content: space-between;
align-items: center;
}
nav img {
width: 140px;
height: 80px;
}
.nav-bar {
flex: 1;
text-align: right;
}
.nav-bar ul li {
list-style: none;
display: inline-block;
padding: 8px 12px;
}
.nav-bar ul li a {
color: aquamarine;
text-decoration: none;
font-size: 33px;
}
.start-1 {
width: 100%;
color: #fff;
position: absolute;
z-index: -1;
left: 50%;
transform: translate(-50%, -50%);
padding-left: 1%;
}
.start-1 h1 {
font-size: 50px;
text-align: left;
padding-top: 15%;
}
.start-1 p {
margin: 10px o 40px;
padding-right: 1%;
text-align: left;
font-size: 18px;
color: #fff;
font-family: monospace;
}
.table {
padding-left: 2%;
font-family: monospace;
font-size: 28px;
}
body {
background-image: url(webimages/india.jpg);
background-position: center;
background-size: cover;
position: relative;
width: 100%;
}<html>
<head>
<title>HOME PAGE</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dongle:wght@300;400&display=swap" rel="stylesheet">
</head>
<body>
<section class="header">
<nav>
<a href="index.html"><img src="webimages/logo.jpg" alt="LOGO"></a>
<div class="nav-bar">
<ul>
<li><a href="index.html"><u>HOME</u></a></li>
<li><a href="ABOUT US.html"><u>ABOUT US</u></a></li>
<li><a href="CONTACT US.html"><u>CONTACT US</u></a></li>
<li><a href="DONATE PAGE.html"><u>DONATE</u></a></li>
</ul>
</div>
</nav>
<div class="start-1">
<strong><h1>CO <sub>2</sub> and Greenhouse Gas Emissions Country Profiles</h1></strong>
<p>How are emissions changing in each country? Is your country making progress on reducing emissions? We built 4 country profiles which allow you to explore the statistics for the top polluting countries. Each profile includes interactive visualizations,
explanations of the presented metrics, and the details on the sources of the data.</p>
</div>
</section>
<section>
<ol class=table>
<h3> Every profile includes five sections</h3>
<li> CO2 emissions: How much does a country emit each year? What is the average emissions per person? How much has it emitted over time? How do emissions compare when we correct for trade?</li>
<li>Coal, oil, gas, cement: How much CO2 comes from coal, oil, gas, flaring or cement production?</li>
<li>Other greenhouse gases: How much total greenhouse gases does each country emit? How much methane, and nitrous oxide is emitted?</li>
<li>Emissions by sector: Which sectors contribute most to emissions? Does transport contribute more or less than electricity; how large are agriculture and land use emissions?</li>
<li>Carbon and energy efficiency: How much energy do we use per unit of GDP? How much carbon do we emit per unit of energy?</li>
</ol>
</section>
</body>
</html>关于z-index的更多信息，请点击此处。
您的.start1div与菜单重叠，并阻止了hyperik。你可以添加一个.start1{top:100px}，看看它是否会降低它的位置，这样它就不会阻止超链接。