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

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

@@ -14,8 +14,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(
     tokens-mat-autocomplete.$prefix, tokens-mat-autocomplete.get-token-slots()) {

src/material/select/select.scss

@@ -165,8 +165,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(
     tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) {
@@ -188,10 +189,6 @@ div.mat-mdc-select-panel {
     border-bottom-right-radius: 0;
     transform-origin: bottom center;
   }
-
-  .mat-mdc-option {
-    --mdc-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(
     tokens-mat-timepicker.$prefix, tokens-mat-timepicker.get-token-slots()) {
     @include token-utils.create-token-slot(border-bottom-left-radius, container-shape);