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

Issue

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.

Solution

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/

Answered By - Daniel Mlodecki