diff --git a/README.md b/README.md
index ad9dda9..8705e2a 100644
--- a/README.md
+++ b/README.md
@@ -54,6 +54,7 @@ The following parameters are available:
 | threshold | 0.5       | Once a section crosses this point, it becomes 'active'                                                                                                                                                              |
 | query     | 'section' | A CSS selector that describes the individual sections of your foreground                                                                                                                                            |
 | parallax  | false     | If `true`, the background will scroll such that the bottom edge reaches the `bottom` at the same time as the foreground. This effect can be unpleasant for people with high motion sensitivity, so use it advisedly |
+| foregroundZIndex  | 2     | lets you specify the z-index of the foreground |
 
 ## `index`, `offset`, `progress` and `count`
 
diff --git a/Scroller.svelte b/Scroller.svelte
index b2285c2..37842d3 100644
--- a/Scroller.svelte
+++ b/Scroller.svelte
@@ -76,6 +76,7 @@
 	export let offset = 0;
 	export let progress = 0;
 	export let visible = false;
+  export let foregroundZIndex = 2;
 
 	let outer;
 	let foreground;
@@ -176,7 +177,7 @@
 		</svelte-scroller-background>
 	</svelte-scroller-background-container>
 
-	<svelte-scroller-foreground bind:this={foreground}>
+	<svelte-scroller-foreground style="z-index: {foregroundZIndex}" bind:this={foreground}>
 		<slot name="foreground"></slot>
 	</svelte-scroller-foreground>
 </svelte-scroller-outer>
@@ -196,7 +197,6 @@
 	svelte-scroller-foreground {
 		display: block;
 		position: relative;
-		z-index: 2;
 	}
 
 	svelte-scroller-foreground::after {