diff --git a/packages/@react-spectrum/s2/src/Modal.tsx b/packages/@react-spectrum/s2/src/Modal.tsx
index fdf5bcb831f..ad55a2b3b24 100644
--- a/packages/@react-spectrum/s2/src/Modal.tsx
+++ b/packages/@react-spectrum/s2/src/Modal.tsx
@@ -12,13 +12,13 @@
 
 import {colorScheme} from './style-utils' with {type: 'macro'};
 import {ColorSchemeContext} from './Provider';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, GlobalDOMAttributes} from '@react-types/shared';
 import {forwardRef, MutableRefObject, useCallback, useContext} from 'react';
 import {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 
-interface ModalProps extends ModalOverlayProps {
+interface ModalProps extends Omit<ModalOverlayProps, 'className' | 'style' | keyof GlobalDOMAttributes> {
   /**
    * The size of the Modal.
    *
@@ -29,7 +29,7 @@ interface ModalProps extends ModalOverlayProps {
 
 const modalOverlayStyles = style({
   ...colorScheme(),
-  position: 'fixed',
+  position: 'absolute',
   top: 0,
   left: 0,
   width: 'full',
diff --git a/packages/dev/s2-docs/src/MobileHeader.tsx b/packages/dev/s2-docs/src/MobileHeader.tsx
index dc8e34a8c6f..b282ea81512 100644
--- a/packages/dev/s2-docs/src/MobileHeader.tsx
+++ b/packages/dev/s2-docs/src/MobileHeader.tsx
@@ -162,7 +162,7 @@ export function MobileHeader({toc, pages, currentPage}) {
         <ActionButton aria-label="Navigation" isQuiet>
           <MenuHamburger />
         </ActionButton>
-        <Modal size="fullscreenTakeover" style={{zIndex: 100, height: '100dvh'}}>
+        <Modal size="fullscreenTakeover">
           <MobileSearchMenu pages={pages} currentPage={currentPage} />
         </Modal>
       </DialogTrigger>