[player] Fix the display of dynamic elements with negative z-index

projects/player/src/app/components/section/section.component.css

+.dynamic-section {
+  display: grid;
+  position: relative;
+  z-index: 0;
+}
+
+.static-element {
+  display: block;
+  position: absolute;
+  overflow: auto;
+}

projects/player/src/app/components/section/section.component.html

@@ -3,11 +3,9 @@
 <ng-template #staticElements>
   <ng-container *ngFor="let element of section.elements; let i = index">
     <app-element-container
-        [style.display]="'block'"
-        [style.overflow]="'auto'"
+        class="static-element"
         [style.width.px]="element.width"
         [style.height.px]="element.height"
-        [style.position]="'absolute'"
         [style.left.px]="element.positionProps.xPosition"
         [style.top.px]="element.positionProps.yPosition"
         [style.z-index]="element.positionProps?.zIndex"
@@ -20,12 +18,13 @@
 </ng-template>
 
 <ng-template #dynamicElements>
-  <div [style.display]="'grid'"
-       [style.grid-template-columns]="!section.autoColumnSize ? section.gridColumnSizes : undefined"
-       [style.grid-template-rows]="!section.autoRowSize ? section.gridRowSizes : undefined"
-       [style.grid-auto-columns]="section.autoColumnSize ? 'auto' : undefined"
-       [style.grid-auto-rows]="section.autoRowSize ? 'auto' : undefined"
-       [style.backgroundColor]="section.backgroundColor">
+  <div
+      class="dynamic-section"
+      [style.grid-template-columns]="!section.autoColumnSize ? section.gridColumnSizes : undefined"
+      [style.grid-template-rows]="!section.autoRowSize ? section.gridRowSizes : undefined"
+      [style.grid-auto-columns]="section.autoColumnSize ? 'auto' : undefined"
+      [style.grid-auto-rows]="section.autoRowSize ? 'auto' : undefined"
+      [style.backgroundColor]="section.backgroundColor">
     <ng-container *ngFor="let element of section.elements; let i = index">
       <app-element-container
           [style.min-width.px]="element.width"

projects/player/src/app/components/section/section.component.ts

@@ -8,7 +8,8 @@ import { Section } from '../../../../../common/models/section';
 
 @Component({
   selector: 'app-section',
-  templateUrl: './section.component.html'
+  templateUrl: './section.component.html',
+  styleUrls: ['./section.component.css']
 })
 export class SectionComponent implements OnInit {
   @Input() parentForm!: FormGroup;