Question

我的HTML超链接无法在我的网页导航栏上运行。我逐渐转移了我的stylesheets和scripts，发现在添加CSS file后，超链接无法指向网页。起初我发现导航菜单与滑块部分重叠（前一个 StackOverflow 问题中提到的问题），但我指定了导航菜单本身的高z-index。对不起，如果代码很长，但我必须提供所有代码才能看到出错的地方。请尝试帮助使响应成为实际修复，而不是仅删除其中一个元素以停止覆盖。

HTML

<div id="container">
    <header>
        <h1><b>Seattle</b>&Metropolitan</h1>
        <nav>
            <ul>
                <li><a href="about.html">About</a></li>
                <li>Buildings</li>
                <li id="contact">Contact Us</li>
            </ul>
        </nav>
    </header>
</div>
<div class="image-section">
    <img src="img/seattleskyline.jpg" alt="Seattle Skyline" id="center-image" />
    <div id="caption">A panoramic view of 1201 Third Avenue at night</div>
    <button id="sliderLeft" onclick="left();"></button>
    <button id="sliderRight" onclick="right();"></button>
</div>
<br><br>
<div class="content">
    Seattle's history can be traced back to the 1850s, when pioneers and natives started building a great city filled with a diverse culure, beautiful scenery, and a vibrant enviornment. The metropolitan area of Seattle now is a high-tech hub, in which four Fortune 500 companies reside: <a href="http://www.amazon.com/" alt="Amazon Website"><b>Amazon.com (#49)</b></a>, <a href="http://www.starbucks.com" alt="Starbucks Website"><b>Starbucks (#208)</b></a>, <a href="http://shop.nordstrom.com" alt="Nordstrom Website"><b>Nordstrom (#227)</b></a>, and <a href="http://www.expeditors.com" alt="Expeditors Website"><b>Expeditors International (#428)</b></a>. 
</div>

CSS

@charset "utf-8";

body
{
    margin: 0;
    padding: 0;
    font-family: Open Sans, sans-serif;
}

#container
{
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

header h1
{
    font-size: 38px;
    float: left;
    font-weight: 100;
}

header nav ul
{
    list-style-type: none;
    margin: 0;
    vertical-align: middle;
    line-height: normal;
    float: right;
    z-index: 999;
}

header nav ul li
{
    line-height: 105px;
    display: inline;
    padding: 45px;
    font-size: 22px;
    font-weight: 100;
}

header nav ul li a
{
    color: black;
    text-decoration: none;
}

#center-image
{
    width: 100%;
    height: 480px;
}

#contact
{
    padding-right: 0;
}

.image-section
{
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    position: relative;
    text-align: center;
}

.image-section #caption
{
    position: absolute;
    display: none;
    bottom: 4px;
    width: 100%;
    text-align: center;
    color: white;
    background: #474747;
    height: 50px;
    line-height: 50px;
    opacity: 0.8;
    font-size: 20px;
}

.image-section button
{
    outline: 0;
}

.image-section #sliderLeft
{
    position: absolute;
    display: none;
    width: 25px;
    height: 100px;
    top: 50%;
    margin-bottom: 50px;
    left: 0;
    opacity: 0.7;
    border: 0;
}

.image-section #sliderRight
{
    position: absolute;
    display: none;
    width: 25px;
    height: 100px;
    top: 50%;
    margin-bottom: 50px;
    right: 0;
    opacity: 0.7;
    border: 0;
}

.content
{
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    font-size: 18px;
    line-height: 35px;
}

.content a
{
    text-decoration: none;
    color: black;
}

.content a:visited
{
    color: black;
}

Answer 1

问题在于.image-section。

我通过更改background-color:yellow;

找到了

显然链接会在后台推送。

要解决此问题，请将z-index:-1;添加到.image-section。

enter image description here

HTML超链接在导航栏中不起作用

1 个答案: