html - z-index 对 Angular Directive(指令)中的元素没有影响

Question

代码:

 directive('ribonUnit', function(){
    return {
      restict: 'A',
      replace: true,
      transclude: false,
      template: '<div class="vPRibbon" name={{score}} style="margin-left:{{offset}}; z-index:100">' +
                 '<div class="vPScore">' +
                    '<span style="font-weight:bold;">{{alphabetic_score}}</span>' +
                 '</div>' +
                 '<div class="vPScoreReasons" data-ng-show="score_hover" style="margin-left:{{reasons_offest}}; z-index:9998"></div>' +
                '</div>',
      link: function(scope, elem, attrs, controller){
        elem.bind('mouseenter', function(){
          scope.$apply(function(){
            scope.score_hover = true;
          });
        });

CSS:

vPRibbon {
  position: absolute;
  z-index: 50;
  cursor: pointer;
  left:11em;
  top:-1em;
  height:7em;
  width:5.3em;
  background-repeat: no-repeat;
  background-image:url('chrome-extension://__MSG_@@extension_id__/images/Rating-ribbon.png');
}

.vPScoreReasons{
  background-image:url('chrome-extension://__MSG_@@extension_id__/images/score-box.png');
  width: 256px;
  height: 181px;
}
/*.vPScoreBox .vPRibbon {

}*/
.vPContentBox .vPScore span{
  float: left;
  padding: 0em 0.85em;
  font-weight: bold;
  margin-top: -0.2em;
  font-family: Museo;
}

.vPScoreReasons 出现在下一个 .vPScore 下(布局是一个类似网格的 View ，包含许多产品及其分数)

非常感谢任何帮助。

Answer 1

使用 !Important

z-index: 50 !重要;

这对你有用。