diff --git a/README.md b/README.md
index 9f03ba04..e1a44a9c 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@ MVP example, showing what you get by implementing `open`, `onDismiss` and a sing
 
 ## [Snap points & overflow](https://react-spring-bottom-sheet.cocody.dev/fixtures/scrollable)
 
-> [View demo code](/pages/fixtures/scrollable.tsx#L85-L95)
+> [View demo code](/pages/fixtures/scrollable.tsx#L86-L97)
 
 A more elaborate example that showcases how snap points work. It also shows how it behaves if you want it to be open by default, and not closable. Notice how it responds if you resize the window, or scroll to the bottom and starts adjusting the height of the sheet without scrolling back up first.
 
diff --git a/docs/fixtures/CloseExample.tsx b/docs/fixtures/CloseExample.tsx
new file mode 100644
index 00000000..9149ebb6
--- /dev/null
+++ b/docs/fixtures/CloseExample.tsx
@@ -0,0 +1,29 @@
+import cx from 'classnames/dedupe'
+import { forwardRef } from 'react'
+import Link from 'next/link'
+
+type Props = {
+  className?: Parameters<typeof cx>[0]
+} & Omit<
+  React.PropsWithoutRef<JSX.IntrinsicElements['a']>,
+  'children' | 'className'
+>
+
+const CloseExample = forwardRef<HTMLAnchorElement, Props>(
+  ({ className, ...props }, ref) => (
+    <Link href="/">
+      <a
+        {...props}
+        className={cx(
+          'absolute left-0 top-0 only-window my-4 mx-8 py-2 px-4 transition-colors focus:duration-0 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 text-gray-600 hover:text-gray-700 active:text-gray-800 text-xs rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:ring-gray-400',
+          className
+        )}
+        ref={ref}
+      >
+        Close example
+      </a>
+    </Link>
+  )
+)
+
+export default CloseExample
diff --git a/docs/fixtures/Container.tsx b/docs/fixtures/Container.tsx
index df8defb0..4654ed3e 100644
--- a/docs/fixtures/Container.tsx
+++ b/docs/fixtures/Container.tsx
@@ -1,7 +1,7 @@
 import cx from 'classnames/dedupe'
 import { useEffect } from 'react'
 import { useDetectEnv } from './hooks'
-import Link from 'next/link'
+import CloseExample from './CloseExample'
 
 export default function Container({
   children,
@@ -29,11 +29,7 @@ export default function Container({
         className
       )}
     >
-      <Link href="/">
-        <a className="z-10 absolute left-0 top-0 only-window my-4 mx-8 py-2 px-4 transition-colors focus:duration-0 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 text-gray-600 hover:text-gray-700 active:text-gray-800 text-xs rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:ring-gray-400">
-          Close example
-        </a>
-      </Link>
+      <CloseExample />
       {children}
     </main>
   )
diff --git a/pages/fixtures/scrollable.tsx b/pages/fixtures/scrollable.tsx
index ce44da8b..109687e0 100644
--- a/pages/fixtures/scrollable.tsx
+++ b/pages/fixtures/scrollable.tsx
@@ -3,6 +3,7 @@ import type { NextPage } from 'next'
 import { useRef } from 'react'
 import scrollIntoView from 'smooth-scroll-into-view-if-needed'
 import Button from '../../docs/fixtures/Button'
+import CloseExample from '../../docs/fixtures/CloseExample'
 import Code from '../../docs/fixtures/Code'
 import Container from '../../docs/fixtures/Container'
 import ScrollUp from '../../docs/fixtures/ScrollUp'
@@ -84,6 +85,7 @@ const ScrollableFixturePage: NextPage<GetStaticProps> = ({
         <SnapMarker style={{ top: '75vh', ['--size' as any]: '0.5vh' }} />
         <BottomSheet
           open
+          sibling={<CloseExample className="z-10" />}
           ref={sheetRef}
           initialFocusRef={focusRef}
           defaultSnap={({ maxHeight }) => maxHeight / 2}
diff --git a/src/BottomSheet.tsx b/src/BottomSheet.tsx
index 400dfe6f..30561697 100644
--- a/src/BottomSheet.tsx
+++ b/src/BottomSheet.tsx
@@ -39,6 +39,7 @@ export const BottomSheet = React.forwardRef<
 >(function BottomSheetInternal(
   {
     children,
+    sibling,
     className,
     footer,
     header,
@@ -565,6 +566,7 @@ export const BottomSheet = React.forwardRef<
         pointerEvents: !ready || off ? 'none' : undefined,
       }}
     >
+      {sibling}
       {blocking ? (
         <div
           // This component needs to be placed outside bottom-sheet, as bottom-sheet uses transform and thus creates a new context
diff --git a/src/types.ts b/src/types.ts
index a34f8f85..edd44596 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -29,10 +29,16 @@ export type SpringEvent = {
   // @TODO implemen SNAP events
 }
 
-// Rename to Props! Woohoo!
 export type Props = {
   children: React.ReactNode
 
+  /**
+   * Similar to children, but renders next to the overlay element rather than inside it.
+   * Useful for things that are position:fixed and need to overlay the backdrop and still be interactive
+   * in blocking mode.
+   */
+  sibling?: React.ReactNode
+
   /**
    * Start a transition from closed to open, open to closed, or snap to snap.
    * Return a promise or async to delay the start of the transition, just remember it can be cancelled.