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下（布局是一个网格状视图，包含许多产品及其分数）

任何帮助都很受欢迎。

Answer 1

使用！重要

z-index：50！重要;

这对你有用。

Answer 2

“每个堆叠上下文都有一个HTML元素作为其根元素。当在元素上形成新的堆叠上下文时，该堆叠上下文会将其所有子元素限制在堆叠顺序中的特定位置。这意味着一个元素包含在堆叠顺序底部的堆叠上下文中，即使z索引为，也无法使其在堆叠顺序较高的另一个堆叠上下文中出现在另一个元素的前面十亿！” https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 3

您可以创建全局变量ZINDEX

在指令中，您可以使用

ZINDEX++;
elem[0].style.zIndex = ZINDEX

这样，总是在前面显示一个新的模式

Answer 4

googlenauts 小伙伴，这里有一个解决方案：不要将 angular 指令直接放在目标组件上。相反，用 <ng-container> 包裹它并将指令放在上面。

在 http://benprograms.net/2018/06/30/angular-ng-star-inserted/ 处找到解决方案

z-index对angular指令中的元素没有影响

4 个答案: