diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index cfdefd87d..3512d5ab4 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -615,7 +615,16 @@ StButton.popup-menu-item:insensitive {
 }
 
 .notification-close {
-    -shell-close-overlap: 14px;
+    /* we start out in the top right of the
+     * notification, inset.
+     *
+     * center is 32px/2 = 17px
+     *
+     * adjust left 2px
+     * adjust down 8px */
+
+    -shell-close-overlap-x: 15px;
+    -shell-close-overlap-y: 12px;
 }
 
 .window-close:rtl {
diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js
index 95044a19c..82dea0ac5 100644
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -236,9 +236,10 @@ function makeCloseButton() {
 
     closeButton.connect('style-changed', function() {
         let themeNode = closeButton.get_theme_node();
-        let overlap = themeNode.get_length('-shell-close-overlap');
-        closeButton.translation_x = overlap;
-        closeButton.translation_y = -overlap;
+        closeButton.translation_x = themeNode.get_length('-shell-close-overlap-x');
+
+        // libcroco doesn't support negative units
+        closeButton.translation_y = -themeNode.get_length('-shell-close-overlap-y');
     });
 
     return closeButton;