为什么我的 pdf 链接不起作用？答案

【问题标题】：Why doesn't my link to my pdf work?为什么我的 pdf 链接不起作用？
【发布时间】：2015-06-24 23:18:27
【问题描述】：

我正确地将我的 pdf 链接到我的项目并且拼写正确，但是当我将鼠标悬停在它上面并单击它时，什么也没有发生。我不确定它是否与一切的定位有关？

    body {
      margin: 0px;
      padding: 0px;
      height: 100%;
      background: white;
    
    }
    
    /*----------header styles-------------*/
    #header {
      color: #D7DADB;
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
      font-size : 15px;
      text-align: left;
      width: 100%;
      padding-left: 3em;
      position: relative;
      height: 15%;
      box-sizing: border-box;
      padding-top: 1em;
    
    }
    
    #header img
    {
    	float: left;
    	padding-left: 3em;
    }
    
    h1{
    width: 9em;
    float: left;
    padding-left: 0.5em;
    color: #45CCCC;
    padding-bottom: 1px;
    }
    
    #nav {
      width: 50%;
      margin:0;
      padding:0;
      text-align: right;
      color: red;
      font-size:20px;
      float: right;
      padding-right: 2em;
    
    }
    
    #nav ul {
      padding: 1px;
    }
    
    #nav li {
      display: inline;
      padding: 38px;
    }
    
    #nav li a {
      color: #2C3E50;
      text-decoration: none;
    }
    
    #nav li a:hover {
      color: #45CCCC;
    }
    
    /*----------hero image styles-------------*/
    #hero{
    	padding-top: 25em;
    	width: 100%;
    	height: 30em;
    	position: relative;
    	z-index: -1;
    }
    
    #heroImage
    {
    	top: 9%;
    	width: 100%;
    	z-index: 1;
    	position: absolute;
    
    }
    
    #overlay{
    	width: 34em;
    	top: -5%;
    	margin-left: 30%;
    	z-index: 2;
    	position: relative;
    	clear: left;
    
    
    }
    
    h2{
    	width: 100%;
    	position: relative;
    	font-family: 'Roboto', sans-serif;
    	font-weight: 300;
    	font-size: 60px;
    	float: center;
    	color: white;
    	opacity: 1.0;
    
    	text-shadow: 2px 2px 3px #000000;
    	text-align: center;
    }
    
    h3{
    	width: 100%;
    	position: relative;
    	font-family: 'Roboto', sans-serif;
    	font-weight: 300;
    	font-size: 30px;
    	color: white;
    	opacity: 1.0;
    	text-shadow: 3px 3px 2px #000000;
    	text-align: center;
    
    }
    
    a.down{
    	font-family: 'Roboto', sans-serif;
    	font-weight: 400;
    	text-decoration: none;
    	color: #181b1e;
    	background: #45CCCC;
    	position: relative;
    	padding: 0.6em 1em;
    	font-size: 1.2em;
    	-webkit-border-radius: 6px;
    	width: 100%;
    }
    
    a.down:hover{
    	text-decoration: underline;
    }

    <body>
    	<div id="header">
    		<a href="index.html"><div id="leftHeader">
    		<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
    		<h1>Amanda Farrington</h1>
    	</div>
    		<div id="nav">
    		
          <ul>
            <li><a href="about.html">About</a></li>
            <li><a href="#workJump">Work</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="notes.html">Notes</a></li>
          </ul>
    		</div>
    	</div>
    	<div id="hero">
    		<div id="heroImage">
    		<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
    		</div>
    
    		<div id="overlay">
    		<h2>Amanda Farrington</h2>
    		<h3>Graphic Artist | Web Designer</h3>
        <a href="assets/resume.pdf" class="down">View Resume</a>                
    
    		</div>
    	</div>

【问题讨论】：

代码似乎正确。如果您尝试在地址栏中键入 PDF 地址会怎样？你能看到吗？

标签： html css pdf hyperlink

【解决方案1】：

这是#hero 上的 z-index -1 - 它基本上是在身体下方。将其更改为 0 或将其删除，您应该会很好。

【讨论】：

我写的是一样的，但是关于#overlay (z-index: 2)。如果您绝对需要它们，则将 (z-index: 99) 添加到 a.down，将其置于前台。
好吧，因为它的父母在身体“下方”，所以该孩子的任何数量的 z 索引都不会真正有帮助。删除 -1 是要走的路。
没问题 - 将此答案标记为正确将非常感谢:)
你能告诉我如何将它像其他文本一样居中，它似乎没有移动然后我改变了定位和边距。
inline elements - a 是一个内联元素，因此您不能以与设置块级元素样式完全相同的方式设置它的样式。您可以将其显示为块并为其提供一些额外的样式以使其居中，或者您可以将其父元素中的所有文本居中对齐，在这种情况下应该没问题。