链接失效，无法点击答案

【问题标题】：Link doesn't work, is not clickable链接失效，无法点击
【发布时间】：2017-05-06 19:18:18
【问题描述】：

我正在为网站上的“a”元素（按钮）而苦苦挣扎。他的位置在视频部分。不知道为什么不能点击。我尝试改变任何元素的定位，还有 z-index。我正在使用 bootstrap-3。代码如下：

<section id="video">
  <div class="video-container">
     <h2>Hi I'm Matt </h2>
     <h3>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum eum doloribus, consequuntur nihil quod pariatur dolor labore amet consequatur quia.
     </h3>
     <a href="#about-me">Let's start</a>
  </div>
  <video autoplay loop muted id="video">
     <source src="video/coding.webm" type="video/webm">
     <source src="video/coding.mp4" type="video/mp4">
     <source src="video/coding.ogg" type="video/ogg">
  </video>
</section>

        /*  ************ LESS ************  */
    @small: ~'only screen and (min-width: 768px)';
    @medium: ~'only screen and (min-width: 992px)';
    @large: ~'only screen and (min-width: 1400px)';

    @brand-primary: #f6c664;
    @bright-text-color:  #FFF;

    .relative {
        position: relative;
    }

    .absolute {
        position: absolute;
    }

    .inline-block {
        display: inline-block;
    }

    .block {
        display: block;
    }

    .upper {
        text-transform: uppercase;
    }

    .heading-decor-line {
        &:after {
                content: '';
                .absolute;
                .block;
                top: 100px;
                left: 15px;
                width: 80px;
                height: 6px;
                z-index: -1;
                background: @brand-primary;
         }
    }

    .btn {
        .upper;
        font-weight: 700;
        padding: 12px 20px;
        font-size: 14px;
        line-height: 1.4;
         border-radius: 4px;
    }

    /*  ************ STYLES ************  */
    #video {
         .relative;
         top: 20px;
         right: 0;
         bottom: 0;
         width: 100%;
         z-index: -10;
         &:after {
                content: "";
                z-index: 0;
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 99%;
                background: rgba(30, 30, 30, 0.8) none repeat scroll 0px 0px;
         }
    }

    .video-container {
         top: 30%;
         left: 15%;
         .absolute;
         z-index: 1;
    }

    .video-container h2 {
        font-size: 2rem;
        margin: 0;
        color: #FFF;
        .relative;
        z-index: 2;
        text-transform: none;
        .heading-decor-line;
    }

    .video-container a {
        display: none;
    }

    .video-container h3 {
         .relative;
         .block;
         top: 10px;
         z-index: 2;
         color: @bright-text-color;
         font-size: 0.9rem;
         width: 80%;
         text-transform: none;
         font-weight: 300;
    }

    .video-container {
         @media @small {
                h2 {
                     font-size: 5rem;
                     margin: 0px 0px 40px;
                }
                h3 {
                     font-size: 1.6rem;
                     top: 20px;
                }
                a {
                     .relative;
                     color: @bright-text-color;
                     background-color: @brand-primary;
                     text-decoration: none;
                     .inline-block;
                     z-index: 30;
                     .btn;
                     top: 30px;
                }
         }
         @media @medium {
                h2 {
                     font-size: 6rem;
                     margin: 0px 0px 70px;
                }
                h3 {
                     font-size: 2rem;
                     top: 20px;
                }
                a {
                     top: 60px;
                }
         }
    }

提前感谢您的帮助。

【问题讨论】：

嗨，马特，欢迎来到 StackOverflow。让我给你一个提示：试着写下你的疑虑，并用一种不仅能帮助你而且能帮助未来的其他人的方式来表达它。这也意味着您应该尝试以一种方式组织问题，以避免不必要的代码，或者让我们深入研究多行以找到真正重要的内容。最佳

标签： html twitter-bootstrap hyperlink tags css-position

【解决方案1】：

首先，您的锚元素链接到哪里？ href 属性指向 id 的 #about-me。您的代码中的哪个元素具有 id？

其次，如果你想让锚元素成为一个按钮，你需要像这样添加 btn 类：

<a href="#about-me" class="btn btn-default">Let's start</a>

【讨论】：