fix(material/checkbox): broken appearance in some grid layouts (#25197)

Fixes that the checkbox looked broken when placed in some CSS grid layouts.

Fixes #25153.

(cherry picked from commit 6d33f56)

Author: crisbeto

src/material-experimental/mdc-checkbox/checkbox.scss

@@ -26,6 +26,9 @@
   // we have to change it in order for margins to work.
   display: inline-block;
 
+  // Avoids issues in some CSS grid layouts (see #25153).
+  position: relative;
+
   .mdc-checkbox {
     // MDC theme styles also include structural styles so we have to include the theme at least
     // once here. The values will be overwritten by our own theme file afterwards.

src/material/checkbox/checkbox.scss

@@ -189,6 +189,9 @@ $_mark-stroke-size: math.div(2, 15) * checkbox-common.$size !default;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 
+  // Avoids issues in some CSS grid layouts (see #25153).
+  position: relative;
+
   .mat-ripple-element:not(.mat-checkbox-persistent-ripple) {
     opacity: 0.16;
   }