From ad7fed06692a57e5b4e2c6e1bd84ba6f325fe95d Mon Sep 17 00:00:00 2001
From: Aadil <77232799+aadil42@users.noreply.github.com>
Date: Wed, 5 Jul 2023 13:59:14 +0530
Subject: [PATCH] Update Modal.css

When the model is closed we should set its z-index to some negative value since we're not displaying it none. Because with opacity the element is still there and it might overlap with other elements or a button. In my case, the element was above the "open model" button so I wasn't able to click it. This change will take care of that issue. :)
---
 code/03-using-css-animations/src/components/Modal/Modal.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/code/03-using-css-animations/src/components/Modal/Modal.css b/code/03-using-css-animations/src/components/Modal/Modal.css
index eacf239c3d..2696a57d06 100644
--- a/code/03-using-css-animations/src/components/Modal/Modal.css
+++ b/code/03-using-css-animations/src/components/Modal/Modal.css
@@ -19,6 +19,7 @@
 
 .ModalClosed {
     animation: closeModal 0.4s ease-out forwards;
+    z-index: -100;
 }
 
 @keyframes openModal {
@@ -49,4 +50,4 @@
         opacity: 0;
         transform: translateY(-100%);
     }
-}
\ No newline at end of file
+}