diff --git a/src/lib/button-toggle/button-toggle.scss b/src/lib/button-toggle/button-toggle.scss
index 0d9623b3cc0b..e1b9c69ab1e6 100644
--- a/src/lib/button-toggle/button-toggle.scss
+++ b/src/lib/button-toggle/button-toggle.scss
@@ -93,7 +93,9 @@ $mat-button-toggle-border-radius: 2px !default;
   }
 }
 
-.mat-button-toggle-ripple {
+// Increase specificity because ripple styles are part of the `mat-core` mixin and can
+// potentially overwrite the absolute position of the container.
+.mat-button-toggle .mat-button-toggle-ripple {
   @include mat-fill;
 
   // Disable pointer events for the ripple container, because the container will overlay the user
diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
index 565ffcb53796..e8a2dbdd60c2 100644
--- a/src/lib/button/button.scss
+++ b/src/lib/button/button.scss
@@ -75,8 +75,11 @@
   }
 }
 
-// The ripple container should match the bounds of the entire button.
-.mat-button-ripple, .mat-button-focus-overlay {
+// The ripple container and focus overlay should match the bounds of the entire button.
+// Increase specificity for the ripple container because ripple styles are part of
+// the `mat-core` mixin and can potentially overwrite the absolute position of the container.
+.mat-button-ripple.mat-ripple,
+.mat-button-focus-overlay {
   @include mat-fill;
 
   // Disable pointer events for the ripple container and focus overlay because the container
diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss
index fb936292c039..5090761738d9 100644
--- a/src/lib/checkbox/checkbox.scss
+++ b/src/lib/checkbox/checkbox.scss
@@ -431,7 +431,9 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   left: 50%;
 }
 
-.mat-checkbox-ripple {
+// Increase specificity because ripple styles are part of the `mat-core` mixin and can
+// potentially overwrite the absolute position of the container.
+.mat-checkbox .mat-checkbox-ripple {
   position: absolute;
   left: calc(50% - #{$_mat-checkbox-ripple-radius});
   top: calc(50% - #{$_mat-checkbox-ripple-radius});
diff --git a/src/lib/core/option/option.scss b/src/lib/core/option/option.scss
index bb8789c52ed0..d1d03547dc37 100644
--- a/src/lib/core/option/option.scss
+++ b/src/lib/core/option/option.scss
@@ -58,7 +58,9 @@
   text-overflow: ellipsis;
 }
 
-.mat-option-ripple {
+// Increase specificity because ripple styles are part of the `mat-core` mixin and can
+// potentially overwrite the absolute position of the container.
+.mat-option .mat-option-ripple {
   @include mat-fill;
 
   // Disable pointer events for the ripple container because the container will overlay the
diff --git a/src/lib/core/ripple/_ripple.scss b/src/lib/core/ripple/_ripple.scss
index 8c66ce92ffdb..084bb547bbb4 100644
--- a/src/lib/core/ripple/_ripple.scss
+++ b/src/lib/core/ripple/_ripple.scss
@@ -4,10 +4,15 @@
 $mat-ripple-color-opacity: 0.1;
 
 @mixin mat-ripple() {
+
   // The host element of an mat-ripple directive should always have a position of "absolute" or
-  // "relative" so that the ripple divs it creates inside itself are correctly positioned.
+  // "relative" so that the ripples inside are correctly positioned relatively to the container.
   .mat-ripple {
     overflow: hidden;
+
+    // By default, every ripple container should have position: relative in favor of creating an
+    // easy API for developers using the MatRipple directive.
+    position: relative;
   }
 
   .mat-ripple.mat-ripple-unbounded {
diff --git a/src/lib/menu/menu.scss b/src/lib/menu/menu.scss
index cebbfb9283ab..177fbcdec978 100644
--- a/src/lib/menu/menu.scss
+++ b/src/lib/menu/menu.scss
@@ -83,7 +83,9 @@ button.mat-menu-item {
   width: 100%;
 }
 
-.mat-menu-ripple {
+// Increase specificity because ripple styles are part of the `mat-core` mixin and can
+// potentially overwrite the absolute position of the container.
+.mat-menu-item .mat-menu-ripple {
   @include mat-fill;
 
   // Prevent any pointer events on the ripple container for a menu item. The ripple container is
diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss
index c613cc8684e4..3086d87833d4 100644
--- a/src/lib/radio/radio.scss
+++ b/src/lib/radio/radio.scss
@@ -115,7 +115,9 @@ $mat-radio-ripple-radius: 25px;
   cursor: default;
 }
 
-.mat-radio-ripple {
+// Increase specificity because ripple styles are part of the `mat-core` mixin and can
+// potentially overwrite the absolute position of the container.
+.mat-radio-button .mat-radio-ripple {
   position: absolute;
   left: calc(50% - #{$mat-radio-ripple-radius});
   top: calc(50% - #{$mat-radio-ripple-radius});
diff --git a/src/lib/slide-toggle/slide-toggle.scss b/src/lib/slide-toggle/slide-toggle.scss
index fc68eac53ea0..5e0341cd441f 100644
--- a/src/lib/slide-toggle/slide-toggle.scss
+++ b/src/lib/slide-toggle/slide-toggle.scss
@@ -163,7 +163,9 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
 }
 
 // Ripple positioning for the slide-toggle. Moves the ripple container into the center of the thumb.
-.mat-slide-toggle-ripple {
+// Increase specificity because ripple styles are part of the `mat-core` mixin and can
+// potentially overwrite the absolute position of the container.
+.mat-slide-toggle .mat-slide-toggle-ripple {
   position: absolute;
   top: calc(50% - #{$mat-slide-toggle-ripple-radius});
   left: calc(50% - #{$mat-slide-toggle-ripple-radius});
diff --git a/src/lib/stepper/step-header.scss b/src/lib/stepper/step-header.scss
index a1516987f67d..c2cc86108715 100644
--- a/src/lib/stepper/step-header.scss
+++ b/src/lib/stepper/step-header.scss
@@ -52,7 +52,9 @@ $mat-step-header-icon-size: 16px !default;
   overflow: hidden;
 }
 
-.mat-step-header-ripple {
+// Increase specificity because ripple styles are part of the `mat-core` mixin and can
+// potentially overwrite the absolute position of the container.
+.mat-step-header .mat-step-header-ripple {
   @include mat-fill;
   pointer-events: none;
 }
diff --git a/src/material-examples/ripple-overview/ripple-overview-example.css b/src/material-examples/ripple-overview/ripple-overview-example.css
index 559376924a70..7c5b887ee3c2 100644
--- a/src/material-examples/ripple-overview/ripple-overview-example.css
+++ b/src/material-examples/ripple-overview/ripple-overview-example.css
@@ -1,7 +1,4 @@
 .example-ripple-container {
-  /** Necessary until: https://github.com/angular/material2/pull/11913*/
-  position: relative;
-
   cursor: pointer;
   text-align: center;