z-index takes no effect on an element within angular directive

Question

code:

 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 appears under the next .vPScore (the layout is a grid-like view with many products and their scores)

Any help is much appriciated.

Answer 1

use !Important

z-index: 50 !Important;

This will work for you.

Answer 2

"Every stacking context has a single HTML element as its root element. When a new stacking context is formed on an element, that stacking context confines all of its child elements to a particular place in the stacking order. That means that if an element is contained in a stacking context at the bottom of the stacking order, there is no way to get it to appear in front of another element in a different stacking context that is higher in the stacking order, even with a z-index of a billion!" https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 3

You can create a global variable ZINDEX

And in directive you can use

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

this way, always a new modal will be showing in front

Answer 4

Fellow googlenauts, here's a solution: Don't put the angular directive on the target component directly. Instead, wrap it with <ng-container> and put the directive on that.

Solution found at http://benprograms.net/2018/06/30/angular-ng-star-inserted/