javascript - 链接和按钮未触发

Question

注意:缩小范围后，我认为这可能与 position:relative 有关，但我需要弄清楚该怎么做。

我正在从头开始构建一个应用程序，但没有任何按钮或链接被触发。我已将问题范围缩小到 CSS 文件内，因为当我删除 CSS 时，所有按钮和链接都可以工作。

Controller 将信息绑定(bind)到作用域，就像我将 $scope.test = "hello"; 绑定(bind)到 DOM 时一样。但是，没有任何链接或按钮被触发。我尝试了不同链接和按钮的混合和匹配，当光标悬停在链接/按钮上时，光标不会更改为指针。我错过/忘记了什么？

在底部我已经包含了 CSS。

index.html

  <div ng-controller="MainController" class="main-guy">
    {{test}}
    <div style="width:100px; height:100px; position:absolute; background-color: blue" ng-click="info('please work')">Click</div>
        <div class="screen-outside">
          <a href="http://www.google.com">This is a test</a>
            <div class="screen-inside" ui-view>
                <!-- Screen changes with click -->
            </div>
      <a href="http://www.google.com">This is a test</a>
      <button ng-click="hey()">HEY!</button>
            <div class="screen-footer">
                <div class="buttons-bar">
                    <div class="buttons-holder">
                        <div class="button-ind"><a ng-click="screen()">Rider</a></div>
                        <div class="button-ind"><button class="btn" ng-click="screen()">Audio</button></div>
                        <div class="button-ind">Power</div>
                        <div class="button-ind"><button class="btn" ng-click="screen()" value="Bluetooth"></div>
                        <div class="button-ind"><a ui-sref="#" ng-click="screen()">{{test}}</a></div>

                    </div>
                </div>
            </div>
        </div>
        <div class="footer-block-container">
            <div class="bottom-block left-block"></div>
            <div class="bottom-block right-block"></div>
        </div>
    </div>

MainController.js

$scope.hey = function(){
    $window.alert("YAY!!!!");
};

$scope.test = 'Hello';

$scope.screen = function(){
    console.log("Hey!!!");
};

$scope.info = function(msg){
    console.log("Hey!!!");
}

样式.css

.main-guy {
    position:relative;
    width: 640px;
    height: 480px;
    background-color: #050505;
    margin: auto;
    z-index:-1000;
}
.screen-outside {
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
    height: 90%;
    background-color: #888888;
    bottom: 0;
    position: absolute; 
}
.screen-inside {
    margin:auto;
    position:relative;
    height:80%;
    width:85%;
    background-color: #666666;  
}
.screen-footer {
    position: relative;
    bottom: 0;
    margin: auto;
    background-color: #AAAAAA;
    height:20%;
    width:100%;
}
.buttons-bar {
    margin:auto;
    height: 80%;
    width: 70%;
    position:relative;
    background-color: #707070;
}
.buttons-holder {
    width:80%;
    margin: 0 auto;
}
.button-ind {
    margin:auto;

    position:relative;
    width:20%;
    height:40%;
    background-color: #535353;
    font-size:15px;
  display:inline-block;
}
.btn {  
  background-color: transparent; border: 0; padding: 0; width:100%; height:100%;
}
.footer-block-container {
    margin-top:80%;
    width:100%;
    bottom:0;
    left:0;
    height:25%;
    position:absolute;
}
.bottom-block {
    width:20%;
    height:100%;
    background-color:#3A3A3A;

}
.left-block {
    float:left;
}
.right-block {
    float:right;
}

Answer 1

所以我解决了问题:在我的所有 DIV 元素上，我需要设置 z-index: *some value* ; 设置我设置的 position DOM 的元素。这立刻就解决了问题。