diff --git a/thaw/src/drawer/drawer.css b/thaw/src/drawer/drawer.css
index 895cf88..737ea35 100644
--- a/thaw/src/drawer/drawer.css
+++ b/thaw/src/drawer/drawer.css
@@ -1,5 +1,9 @@
 .thaw-drawer-container {
-    z-index: 2001;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
 }
 
 .thaw-drawer-mask {
@@ -9,12 +13,10 @@
     left: 0;
     bottom: 0;
     background-color: #0007;
-    z-index: 2000;
 }
 
 .thaw-drawer {
     position: absolute;
-    z-index: 2002;
 }
 
 .thaw-drawer > .thaw-card {
diff --git a/thaw/src/drawer/mod.rs b/thaw/src/drawer/mod.rs
index bf7a496..eaa4946 100644
--- a/thaw/src/drawer/mod.rs
+++ b/thaw/src/drawer/mod.rs
@@ -12,6 +12,7 @@ pub fn Drawer(
     #[prop(optional, into)] placement: MaybeSignal<DrawerPlacement>,
     #[prop(default = MaybeSignal::Static("520px".to_string()), into)] width: MaybeSignal<String>,
     #[prop(default = MaybeSignal::Static("260px".to_string()), into)] height: MaybeSignal<String>,
+    #[prop(default = MaybeSignal::Static("2000".to_string()), into)] z_index: MaybeSignal<String>,
     #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
     children: Children,
 ) -> impl IntoView {
@@ -27,7 +28,7 @@ pub fn Drawer(
         <Teleport>
             <div
                 class="thaw-drawer-container"
-                style=move || if show.get() { "" } else { "display: none" }
+                style=move || if show.get() { format!("z-index: {}", z_index.get()) } else { "display: none".to_string() }
             >
                 <div class="thaw-drawer-mask" on:click=move |_| show.set(false)></div>
                 <div