diff --git a/assets/diagram-js.css b/assets/diagram-js.css
index d9042e884..601361480 100644
--- a/assets/diagram-js.css
+++ b/assets/diagram-js.css
@@ -468,6 +468,7 @@ marker.djs-dragger tspan {
  */
 .djs-overlay-context-pad {
   width: 72px;
+  z-index: 100;
 }
 
 .djs-context-pad {
diff --git a/test/spec/features/context-pad/ContextPadSpec.js b/test/spec/features/context-pad/ContextPadSpec.js
index ca6852072..6b8e27ef5 100755
--- a/test/spec/features/context-pad/ContextPadSpec.js
+++ b/test/spec/features/context-pad/ContextPadSpec.js
@@ -17,6 +17,7 @@ import {
 } from 'min-dom';
 
 import contextPadModule from 'lib/features/context-pad';
+import overlayModule from 'lib/features/overlays';
 
 import ContextPadProvider from './ContextPadProvider';
 
@@ -265,7 +266,7 @@ describe('features/context-pad', function() {
 
   describe('lifecycle', function() {
 
-    beforeEach(bootstrapDiagram({ modules: [ contextPadModule, providerModule ] }));
+    beforeEach(bootstrapDiagram({ modules: [ contextPadModule, providerModule, overlayModule ] }));
 
 
     function expectEntries(contextPad, element, entries) {
@@ -282,13 +283,20 @@ describe('features/context-pad', function() {
     }
 
 
-    it('should open', inject(function(canvas, contextPad) {
+    it.only('should open', inject(function(canvas, contextPad, overlays) {
 
       // given
       var shape = { id: 's1', width: 100, height: 100, x: 10, y: 10 };
 
       canvas.addShape(shape);
 
+      overlays.add(shape, {
+        position: {
+          right: 10,
+          top: 10
+        },
+        html: '<div class="overlay">FOO</div>'
+      });
 
       // when
       contextPad.open(shape);