diff --git a/docs/4.0/components/alerts.md b/docs/4.0/components/alerts.md
index 90c146362e..b8bb0c2168 100644
--- a/docs/4.0/components/alerts.md
+++ b/docs/4.0/components/alerts.md
@@ -59,10 +59,10 @@ You can see this in action with a live demo:
 
 {% example html %}
 <div class="alert alert-warning alert-dismissible fade show" role="alert">
+  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
   <button type="button" class="close" data-dismiss="alert" aria-label="Close">
     <span aria-hidden="true">&times;</span>
   </button>
-  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
 </div>
 {% endexample %}
 
diff --git a/scss/_alert.scss b/scss/_alert.scss
index 3dfd13f56a..66fba24ead 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -3,6 +3,7 @@
 //
 
 .alert {
+  position: relative;
   padding: $alert-padding-y $alert-padding-x;
   margin-bottom: $alert-margin-bottom;
   border: $alert-border-width solid transparent;
@@ -28,9 +29,9 @@
 .alert-dismissible {
   // Adjust close link position
   .close {
-    position: relative;
-    top: -$alert-padding-y;
-    right: -$alert-padding-x;
+    position: absolute;
+    top: 0;
+    right: 0;
     padding: $alert-padding-y $alert-padding-x;
     color: inherit;
   }