Start work for wait with absolute element

#546

src/app/components/wait/wait-demo.component.html

@@ -2,9 +2,16 @@
 
 
 <div style="height: 200px; width: 200px; margin-top: 10px;">
-  A large area that can be waited with the <code>sky-wait</code> directive.
+
   <sky-wait [isWaiting]="isWaiting">
   </sky-wait>
+
+  <div>
+    <p style="position:absolute; background-color: red">
+    A large area that can be waited with the <code>sky-wait</code> directive.
+    </p>
+  </div>
+
 </div>
 
 <button type="button" class="sky-btn sky-btn-primary" (click)="showPageWait(true)">Show page wait</button>

src/modules/wait/fixtures/wait.component.visual-fixture.html

@@ -12,3 +12,16 @@
   </div>
 
 </div>
+
+<div id="screenshot-wait-absolute" style="height: 200px; width: 200px; margin-top: 10px;">
+
+  <sky-wait [isWaiting]="isWaiting">
+  </sky-wait>
+
+  <div>
+    <p style="position:absolute; background-color: red">
+    A large area that can be waited with the <code>sky-wait</code> directive.
+    </p>
+  </div>
+
+</div>

src/modules/wait/wait.component.scss

@@ -8,6 +8,7 @@
   left: 0;
   bottom: 0;
   background-color: $sky-wait-mask-color;
+  z-index: $sky-page-wait-z-index;
 }
 
 .sky-wait-mask-loading-fixed {

src/modules/wait/wait.component.visual-spec.js

@@ -12,6 +12,17 @@ describe('wait component', function () {
       });
   });
 
+  it('should display wait on parent to block absolute item', function () {
+    return browser
+      .setupTest('/wait.html')
+      .click('.sky-test-wait')
+      .compareScreenshot({
+        screenshotName: 'wait_component_absolute',
+        selector: '#screenshot-wait-absolute',
+        checkAccessibility: true
+      });
+  });
+
   it('should display nonblocking wait on parent', function () {
     return browser
       .setupTest('/wait.html')