diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss
index 62586a2baf..23d708dbc1 100644
--- a/cms/static/sass/_unit.scss
+++ b/cms/static/sass/_unit.scss
@@ -245,8 +245,8 @@
 
     &.editing {
       border: 1px solid $lightBluishGrey2;
-      z-index: 9999;
-
+      z-index: auto;
+      
       .drag-handle,
       .component-actions {
         display: none;
@@ -284,12 +284,17 @@
     overflow-x: auto;
   }
 
+  .wrapper-component-editor {
+    z-index: 9999;
+    position: relative;
+  }
+
   .component-editor {
     @include edit-box;
+    @include box-shadow(none);
     display: none;
     padding: 20px;
     border-radius: 2px 2px 0 0;
-    @include box-shadow(none);
 
     .metadata_edit {
       margin-bottom: 20px;
diff --git a/cms/templates/component.html b/cms/templates/component.html
index b7ad9c3c33..639d22ea12 100644
--- a/cms/templates/component.html
+++ b/cms/templates/component.html
@@ -1,13 +1,17 @@
-<div class="component-editor">
-  <div class="module-editor">
-    ${editor}
-  </div>
-  <a href="#" class="save-button">Save</a>
-  <a href="#" class="cancel-button">Cancel</a>
+<div class="wrapper wrapper-component-editor">
+	<div class="component-editor">
+	  <div class="module-editor">
+	    ${editor}
+	  </div>
+	  <a href="#" class="save-button">Save</a>
+	  <a href="#" class="cancel-button">Cancel</a>
+	</div>
 </div>
+
 <div class="component-actions">
   <a href="#" class="edit-button standard"><span class="edit-icon"></span>Edit</a>
   <a href="#" class="delete-button standard"><span class="delete-icon"></span>Delete</a>  
 </div>
 <a data-tooltip="Drag to reorder" href="#" class="drag-handle"></a>
-${preview}
\ No newline at end of file
+${preview}
+