我无法在任何地方点击我的链接。它们不在div中，似乎阻止了我点击它们的能力。它们也不应该是不透明的，因为它们不在那个div内。他们在自己的div中。有人看到我在这里失踪的东西吗？如何更改此设置以便我可以再次单击我的链接？我正在搞乱背景图片一段时间。我只是不知道发生了什么。这是我为学校做的一个好看的网站。我只是需要帮助所以我可以把它变成这个！谢谢！
<!DOCTYPE html>
<!--
LOCAL PAGE
Heather M Smith
My First Home Page
CSIS 1430
6/18/2017
-->
<html>
<head>
<title>Heather's Home Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
max-height: 100%;
margin: 0 auto;
}
#background{
background: #373737 url('pinkBackground.jpg') no-repeat;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: -3;
}
#heading
{
text-align: center;
}
#emailAddressLink
{
color: white;
}
#topBox
{
margin-top: 50px;
}
h1, h2, h3, h4
{
color: black;
font-family: Georgia;
text-shadow: 1px 0px 5px white;
text-align: center;
z-index: 4;
}
ol, ul, li
{
color: black;
font-family: Georgia;
font-size: 20px;
line-height: 2em;
z-index: 4;
}
.bigText
{
color: #373737;
font-family: Georgia;
font-size: 60px;
}
.link
{
color: #5200cc;
text-decoration: none;
font-family: Georgia;
font-size: 25px;
word-spacing: 5px;
line-height: 2em;
font-weight: bold;
text-shadow: 2px 0px 10px #ffff99;
z-index: 4;
}
.box
{
background-color: #DCD0C0;
padding: 20px;
border: 2px solid #373737;
margin: 10px auto;
width: 800px;
height: 300px;
opacity: .3;
z-index: -3;
}
.boxContents
{
width: 800px;
height: 340px;
margin: 10px auto;
margin-top: -350px;
text-align: left;
line-height: 2em;
z-index: 4;
}
#intro
{
font-family: Georgia;
font-size: medium;
word-wrap: normal;
font-size: 1.5em;
}
#slccLogo
{
position: relative;
float: right;
padding: 30px;
width: 250px;
height: 250px;
}
#owlImage
{
float: right;
width: 300px;
height: 200px;
}
#lastBox
{
line-height: 6em;
}
</style>
</head>
<body>
<!--BACKGROUND-->
<div id="background"></div>
<!--HEADING-->
<div id="heading">
<h1 class='bigText'>Heather's Home Page</h1>
<h2>CSIS 1430 | Email me:</h2>
<!--EMAIL ADDRESS-->
<address>
<a class='link' id="emailAddressLink"
href="mailto:HeatherSmithx@gmail.com" target="_blank">
Heather's Email
</a>
</address>
</div>
<br>
<!--BACKGROUND DIV BOX-->
<div class='box' id="topBox"></div>
<!--INTRO-->
<div class="boxContents">
<span id="intro">Hello! I'm Heather, a student at
<a class='link' href="http://www.slcc.edu/">Salt Lake Community
College</a>
studying Computer Science. I want to be a software developer and
my goal
is to get an internship before I graduate. I'm getting some
experience at
Century Link, where I currently work. I have worked at Century
Link for
two years as a Repair Representative. Even though my interest
in computers is great, I'm also an aspiring artist.
<br>
I've been painting, drawing, and playing music for most of my
life
and I know there's always so much more to learn. I'm hoping to
use my
creativity in a way that can be applied to developing software
in the
future.
</span>
</div>
<br>
<!--COMPUTER SCIENCE COURSES-->
<div class='box'></div>
<div class="boxContents">
<h2 class="heading">My Computer Science Courses at <a class='link'
href="http://www.slcc.edu/" target="_blank">SLCC</a></h2>
<img id="slccLogo" src="SLCCLogo.png" alt="SLCC">
<ul>
<li class="link"><a href =
"https://heathersmithx.wordpress.com/computer-science-and-information-
systems">CSIS 1030</a></li>
<li>CSIS 1340 - content coming soon</li>
<li>CSIS 1400 - content coming soon</li>
<li>CSIS 1410 - content coming soon</li>
<li>CSIS 1430 - content coming soon</li>
<li>CSIS 1550 - content coming soon</li>
</ul>
</div>
<br>
<!--GENERAL EDUCATION COURSES-->
<div class='box'></div>
<div class="boxContents">
<h2>My General Education Courses at <a class='link'
href="http://www.slcc.edu/" target="_blank">SLCC</a></h2>
<img id="owlImage" src="Owl.png" alt="Wise Owl">
<ul>
<li class="link"><a
href="https://heathersmithx.wordpress.com/coursework/english-2010/">ENGLISH
2010 NOTEBOOKS</a></li>
<li class="link"><a href =
"https://heathersmithx.wordpress.com/coursework/film-culture/686-2/">FILM
1070 FINAL PAPER</a></li>
<li class="link"><a href="index/reflection.html">CSIS 1430
REFLECTION</a></li>
<li class="link"><a
href="https://heathersmithx.wordpress.com/outside-the-classroom/">OUTSIDE OF
SCHOOL...</a></li>
</ul>
</div>
<br>
<!--MY FAVORITE WEBSITES-->
<div class='box'></div>
<div class="boxContents">
<h2>My Favorite Web Sites!</h2>
<ol>
<li class='link'><a href = "http://www.dreamincode.net/"
target="_blank">Dream in Code</a></li>
<li class='link'><a href = "https://www.wolframalpha.com/"
target="_blank">Wolfram Alpha</a></li>
<li class='link'><a href = "https://slcc.instructure.com/"
target="_blank">SLCC Canvas</a></li>
<li class='link'><a href = "https://www.w3schools.com/"
target="_blank">w3schools</a></li>
</ol>
</div>
<br>
<!--PROJECTS FROM THIS CLASS-->
<div class='box'></div>
<div class="boxContents" id="lastBox">
<h2>Projects from CSIS 1430</h2>
<h4 class="link">
<a class='link' href='resume.html' target="_blank">RESUME | </a>
<a class='link' href='littleBoxes/littleBoxes.html'
target="_blank">LITTLE BOXES | </a>
<a class="link" href='map/utahMap.html' target='blank'>IMAGE MAP
|</a>
<a class="link" href='PizzaPlace/pizzaIndex.html'
target='blank'>PIZZA ORDER FORM |</a>
<a class='link' href='GuessingGame/GuessIndex.html'
target="_blank">GUESSING GAME | </a>
<a class='link' href='TicTacToe/TicTacToe.html'
target="_blank">TIC TAC TOE | </a>
<a class='link' href='index/reflection.html'
target="_blank">REFLECTION </a>
</h4>
</div>
</body>
</html>
答案 0 :(得分：3)
问题在于.boxContents类。 margin-top选择器正在关闭所有内容。如果删除它，您的链接应按预期运行。另外，只是在旁注，如果不需要，可以避免在CSS中使用大量z索引。它可以很容易地导致问题和内容被隐藏。
答案 1 :(得分：0)
将班级.link更改为z-index:5;，然后对其进行测试。它会把它放在你的另一个<divs>前面。
请确保您使用比其他类/ ID更高z-index的课程。
答案 2 :(得分：0)
你们有很多z-index行动。我会小心你如何使用z-index。请参阅这篇关于CSS z-index的精彩文章，该文章也强调了使用z-index的一些缺陷。 https://philipwalton.com/articles/what-no-one-told-you-about-z-index/