Question

你好，我有一个我正在制作的网站，但过了一会儿，我检查了一切是否正常，不。一个链接现在不起作用。我希望你聪明的人可以帮助我解决我的问题。

无法点击的链接是顶部的第一个“了解详情”链接。

这是我的代码：

@media (min-width:350px) {
    #header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 3;
    }
    
    #headertxt {
        display: none;
        position: absolute;
    }
    
    #woblogo {
        float: left; 
        left: 0%; 
        margin-left: -30px;
        padding-top: 3px;
    }
    
    #navigation, nav {
        float: right; 
        left: 0%; 
        right: 0px; 
        margin-top: -25px;
    }
    
    #navigation {
        margin-right: -15px;
    }
    
    #wobheader {
        margin-top: 77px;
        position: relative;
        z-index: -100;
    }
    
    #joinwob {
        width: 100%;
        height: auto;
        margin-top: -55px;
    }
}

@media (min-width: 381px) {
    #navigation, nav {
        margin-top: 10px;
    }
    
    #wobheader {
        margin-top: 77px;
    }
}

@media (min-width: 400px) {
    #navigation, nav {
        margin-top: -24px;
    }
    
    #wobheader {
        margin-top: 77px;
    }
}

@media (min-width: 401px) {
    #navigation, nav {
        margin-top: 10px;
    }
    
    #wobheader {
        margin-top: 77px;
    }
}

@media (min-width:500px) {
    #navigation {
        margin-right: 0px;
    }
    
    #woblogo {
        margin-left: 0px;
    }
}

@media (min-width: 550px) {
    #navigation, nav {
        margin-top: 12px;
    }
    
    #wobheader {
        margin-top: 77px;
    }
    
    #navigation {
        margin-right: 35px;
    }
    
    .seven.columns {width: 100%;}
}

@media (min-width:775px) {
    .seven.columns {
        width: 56.6666666667%;
    }
    
    #headertxt {
        display: inline;
        transform: translateY(-50%);
        position: relative;
        top: 20px;
        
    }
    
    #navigation, nav {
        margin-top: -4px;
    }
    
    #wobheader {
        margin-top: 77px;
    }
    
    #woblogo {
        width: 125px;
        height: auto;
        padding-top: 3px;
        position: relative;
        left: 30%;
        margin-top: -33px;
    }
}

@media (min-width:900px) {
    #woblogo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    
    #navigation {
        margin-right: 10%;
    }
}

/* HEADER Section */
#header {
    background-color: #000000;
    height:  75px;
    border-bottom: solid 2px #56C9FF;
    width: 100%;
    z-index: 1;
}

#headertxt {
    position: relative;
    color: #ffffff;
}

h5 {
    font-size: 16pt;
}

nav a {
    font-size: 10pt;
}

#woblogo {
    width: 125px;
    height: auto;
}

/* NAVIGATION Section */
#navigation {
}

nav {    
}

nav li{
    display: inline;
    padding-right: 15px;
}

nav #dropdown {
    display: none;
}

nav a {
    text-decoration: none;
    color: #ffffff;
    font-family: Nimbus;
}

nav a:hover {
    padding-top: 7px;
    color: #56C9FF;
    border-top: 4px solid #56C9FF;
}

nav a:active {
    padding-top: 7px;
    color: 56C9FF;
    border-top: 4px solid #56C9FF;
}

/* WORLDOFBASS Video Section */
#wobheader {
    width: 100%;
    height: 100%;
    padding: 0px;
    z-index: -1;
}

#learnmore {
    background-color: #000000;
    height: 50px;
    z-index: 100;
    position: relative;
    top: -50px;
}

#learnmore a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    text-align: center;
    position: relative;
    top: 25px;
    transform: translateY(-50%);
}

#learnmore a:hover {
    color: #56C9FF;
}

#videoheader {
    position: relative;
    z-index: -5;
}

 /* JOIN WORLDOFBASS TODAY! Section */
#joinasdj a, #joinaslabel a, #joinaspromoter a {
        color: #ffffff;
        text-decoration: none;
        background-color: #000000;
        height: 35px;
    }

#joinasdj a:hover, #joinaslabel a:hover, #joinaspromoter a:hover {
        color: #56C9FF;
    }

#joinasdj a {
        position: relative;
        top: 50%;
        transform:translateY(-50%);
        display: block;
        text-align: center;
        height: 35px;
    }

#joinaslabel a {
        position: relative;
        top: 50%;
        transform:translateY(-50%);
        display: block;
        text-align: center;
        height: 35px;
    }

#joinaspromoter a {
        position: relative;
        top: 50%;
        transform:translateY(-50%);
        display: block;
        text-align: center;
        height: 35px;
    }

@media (min-width: 550px) {
        #joinasdj {
            position: relative;
            left: 5%;
        }

        #joinaslabel {
            position: relative;
            left: 9%;

        }

        #joinaspromoter {
            position: relative;
            left: 12%;
        }

        #joinasdj p, #joinaslabel p, #joinaspromoter p {
            position: relative;
            top: 50%;
            transform:translateY(-50%);
        }

        #joinasdj, #joinaslabel, #joinaspromoter {
            position: relative;
            top: -45px;
        }
    }

<!DOCTYPE html>
<html lang="en">
<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>WorldOfBass</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/skeleton.css">
  <link rel="stylesheet" href="css/style.css">

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="images/favicon.png" alt="Image failed to load, please refresh the page. If you are the owner of the site please check with the Web developer that created the site.">

</head>
<body>

  <!-- Primary Page Layout
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <div id="header">
        <div class="container">
            <div class="four columns">
                <h5 id="headertxt"><span>A Network For </span><em id="headertxt2">Promoters</em><span>.</span></h5>
            </div>
            <div class="seven columns">
                <img id="woblogo" src="images/WorldOfBassLogo.png" alt="logo failed to load, please refresh the page.  If you are the owner of the site please check with the Web developer that created the site.">
                <div id="navigation">
                <nav>
                    <ul>
                        <li><a href="index.html">HOME</a></li>
                        <li><a href="#">ABOUT</a></li>
                        <li><a href="#">CONTACT</a></li>
                        <li>
                            <a href="#">MORE</a>

                            <ul>
                                <li id="dropdown"><a href="#">DJ</a></li>
                                <li id="dropdown"><a href="#">DJ</a></li>
                                <li id="dropdown"><a href="#">DJ</a></li>
                                <li id="dropdown"><a href="#">DJ</a></li>
                                <li id="dropdown"><a href="#">DJ</a></li>
                                <li id="dropdown"><a href="#">DJ</a></li>
                            </ul>

                        </li>               
                    </ul>
                </nav>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="twelve columns" id="videoheader">
            <video id="wobheader" autoplay loop>
                <source src="images/headerimg.mp4" type="video/mp4" />
                Your browser does not support video playback in MP4.
            </video>
            <div id="learnmore">
                <a href="learnmore.html">LEARN MORE</a>
            </div>
        </div>
    </div>
        <div class="twelve columns">
            <img src="images/JoinWorldOfBass_Website_4K.jpg" id="joinwob" alt="Image failed to load, please refresh the page. If you are the owner of the site please check with the Web developer that created the site.">
        </div>
        <div class="three columns" id="joinasdj">
            <a href="#"><p>Learn More</p></a>
        </div>
        <div class="three columns" id="joinaslabel">
            <a href="#"><p>Learn More</p></a>
        </div>
        <div class="three columns" id="joinaspromoter">
            <a href="#"><p>Learn More</p></a>
        </div>
<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>

Answer 1

删除CSS中z-index: -5的{{1}}。

您的#videoheader链接是LEARN MORE #videoheader的后代，由于div，因此整个div会在下面的堆中向下移动（在z中） -index terms）布局的其他部分。所以链接不是“可达”（因为没有更好的术语），因为你的布局还有其他东西堆积在它上面。

链接无法完全无法点击

1 个答案: