css – 无法在md-tabs中将md按钮带到前台

2023年6月17日 208次阅读

我正在尝试将md按钮添加到md-tabs区域.使用开发人员工具,我可以看到按钮在那里.它虽然不可见：

Screenshot

我认为在css中使用具有非常高值的z-index将解决问题,但它没有：

.superclick {
  right: 0;
  position: absolute;
  z-index: 100;
}

此按钮也不可点击,我不确定原因是它位于后台.

我在这里错过了什么？如何将按钮带到前台？

请参阅我的fiddle或我的代码：

<body>
<script>
angular.module('MyApp', ['ngMaterial'])

.controller('MyCtrl', function ($scope) {
  $scope.statuses = [
      {id: 1, name: "One", description: "First Tooltip"},
      {id: 2, name: "Two", description: "Second Tooltip"},
      {id: 3, name: "Three", description: "Third Tooltip"},
    ];

     $scope.addTab = function(){
      $scope.statuses.push({id: $scope.statuses.length + 1, name: $scope.statuses.length + 1, description: "New Tooltip"});
     }

   $scope.removeTab = function(status){
    alert(status.id);
    var index = $scope.statuses.indexOf(status);
    $scope.statuses.splice(index,1);
   }

});

</script>

<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<md-content class="md-padding">
  <md-tabs class="" md-selected="selectedTab" md-align-tabs="top" md-border-bottom md-autoselect md-dynamic-height>

    <md-tab ng-repeat="status in statuses">
      <md-tab-label>
        {{status.name}}
        <md-tooltip md-direction="bottom">
          {{status.description}}
        </md-tooltip>
      </md-tab-label>
      <md-tab-body>
        <md-button ng-click="removeTab(status)">Remove Tab</md-button>
      </md-tab-body>
    </md-tab>

    <md-button class="superclick">Superclick</md-button>

    <!--<md-tab ng-click="addTab()">
      <md-tab-label> + Add Tab</md-tab-label>
            <md-tab-body>       
      </md-tab-body>
    </md-tab>-->

  </md-tabs>
</md-content>
</div>
</div>
</body>

最佳答案 改变你的不透明度和位置(见这
fiddle).您的元素被隐藏并与主导航重叠.

md-tab-data {
  opacity:1;
  z-index: 100;
  display: inline-block;
  width:200px;
  float:right;
  position:relative;
}
点赞