Javascript HTML Onclick不'；不能使用负z指数

我在图像部分放置了一个

负z索引

属性，以防止它与导航栏重叠，从而导致

超链接

无法正常工作。在我解决了这个问题之后，我意识到我的幻灯片的左右按钮都不起作用了。允许按钮在

负z索引下工作有任何帮助吗？我在下面粘贴的所有代码都是必需的

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"><div id="caption-text">A panoramic view of 1201 Third Avenue at night</div></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>

JS

@charset "utf-8";

#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;
    filter: alpha(opacity=70);
    border: 0;
}

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

var images = ["img/seattleskyline.jpg", "img/spaceneedle.jpg", "img/ferriswheel.jpg"]
var captions = ["A panoramic view of 1201 Third Avenue at night", "The Seattle's landmark Space Needle", "The Iconic Great Wheel"]
var index = 0;

function left() {
    index -= 2;

    if (index < 0) {
        index = images.length;
    }

    changeImage();
}

function right() {
    changeImage();
}

function changeImage() {
    index++;
    if (index > images.length - 1) {
        index = 0;
    }
    var targetImage = document.getElementById("center-image");
    var caption = document.getElementById("caption-text");

    $("#center-image").fadeOut(1000, function() {
        targetImage.src = images[index];
        $("#center-image").fadeIn(1000);
    });

    $("#caption-text").fadeOut(1000, function() {
        caption.innerHTML = captions[index];
        $("#caption-text").fadeIn(1000);
    });
}

$(document).ready(function() {
    $("#sliderRight").fadeIn(1000);
    $("#sliderLeft").fadeIn(1000);
    $("#caption").fadeIn(1000);
    setInterval(changeImage, 7000);
});

var images=[“img/seattleskyline.jpg”、“img/spaceneedle.jpg”、“img/ferriswheel.jpg”]
var captions=[“第三大道1201号夜间全景”、“西雅图地标性的太空针”、“标志性的大轮子”]
var指数=0；
函数左（）{
指数-=2；
如果（指数<0）{
索引=图像长度；
}
changeImage（）；
}
功能权限（）{
changeImage（）；
}
函数changeImage（）{
索引++；
如果（索引>images.length-1）{
指数=0；
}
var targetImage=document.getElementById（“中心图像”）；
var caption=document.getElementById（“标题文本”）；
$（“#中心图像”）.fadeOut（1000，函数（）{
targetImage.src=图像[索引]；
$（“#中心图像”）.fadeIn（1000）；
});
$（“#标题文本”）.fadeOut（1000，函数（）{
caption.innerHTML=字幕[索引]；
$（“#标题文本”）.fadeIn（1000）；
});
}
$（文档）.ready（函数（）{
$（“#sliderRight”）.fadeIn（1000）；
$（“#sliderLeft”）.fadeIn（1000）；
$（“标题”）.fadeIn（1000）；
设置间隔（changeImage，7000）；
});
将
标题导航的
CSS
更改为：

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

z-索引
在
位置
为
相对
或
绝对
时生效，因此如果您想将其与
css一起使用

添加
位置：相对如下所示，以便
z-index
s生效

header nav ul
{
    position: relative;
    z-index: 9999;
}

.image-section
{
    position: relative;
}
.image-section #sliderLeft
{
    z-index: 999;
}

.image-section #sliderRight
    z-index: 999;
}

与其在你的图像部分上放一个负数索引，为什么不在你的导航栏上放一个大的正数索引呢？我试过了，但没有用。这是因为这样做，你就有效地把元素放在了导航栏下，所以当你点击时，你并不是真的点击了项目检查它是否对所有链接都有效，在小提琴中，它只适用于我的第一个菜单项。我在试图解决该问题时删除了它。你也是这样吗？对我来说都是这样。我觉得很好。