fix(multiple): ensure mat-option parents are the offsetParent (#30977)

We have several components where we use the `offsetTop` of the `mat-option` to determine how much to scroll, however this only works if the panel is the option's `offsetParent`. For that to happen we need a position different from `static`.

Fixes #30974.

Author: crisbeto

src/material/autocomplete/autocomplete.scss

@@ -17,8 +17,9 @@ div.mat-mdc-autocomplete-panel {
   padding: 8px 0;
   box-sizing: border-box;
 
-  // Workaround in case other MDC menu surface styles bleed in.
-  position: static;
+  // Necessary so the `offsetParent` of the nested `mat-option` is the
+  // panel which is required for scroll calculations (see #30974).
+  position: relative;
 
   @include token-utils.use-tokens($token-prefix, $token-slots) {
     border-radius: token-utils.slot(container-shape);

src/material/select/select.scss

@@ -164,8 +164,9 @@ div.mat-mdc-select-panel {
   border-radius: 4px;
   box-sizing: border-box;
 
-  // Workaround in case other MDC menu surface styles bleed in.
-  position: static;
+  // Necessary so the `offsetParent` of the nested `mat-option` is the
+  // panel which is required for scroll calculations (see #30974).
+  position: relative;
 
   @include token-utils.use-tokens($token-prefix, $token-slots) {
     background-color: token-utils.slot(panel-background-color);
@@ -186,10 +187,6 @@ div.mat-mdc-select-panel {
     border-bottom-right-radius: 0;
     transform-origin: bottom center;
   }
-
-  .mat-mdc-option {
-    --mat-list-list-item-container-color: var(--mat-select-panel-background-color);
-  }
 }
 
 .mat-select-panel-animations-enabled {

src/material/timepicker/timepicker.scss

@@ -36,6 +36,10 @@ mat-timepicker {
   padding: 8px 0;
   box-sizing: border-box;
 
+  // Necessary so the `offsetParent` of the nested `mat-option` is the
+  // panel which is required for scroll calculations (see #30974).
+  position: relative;
+
   @include token-utils.use-tokens(m2-timepicker.$prefix, m2-timepicker.get-token-slots()) {
     border-bottom-left-radius: token-utils.slot(container-shape);
     border-bottom-right-radius: token-utils.slot(container-shape);