Ecommerce Shopify WordPress Discussion

Shopify Store | Position "fixed" not working as expected for external component

I created a Shopify Store using the in-built customiser with a Dawn Theme. Then a custom app is developed which loads a custom script and by using Shopify Theme extensions, it allow adding the custom component in the webpage. This app displays kind of like "stories" clicking on which open an overlay. The problem is this overlay cover is broken. It is expected to cover the entire screen and should be in "front" while opened. This is the CSS applied to it: .gSrhA { overflow: hidden; position: fixed; top: 0px; display: flex; align-items: center; justify-content: center; color: white; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.9); z-index: 9999; opacity: 1; transform: translateY(0px); transition: transform 0.1s ease-in-out 0s; } As seen in the image, the black overlay and the opened image needs to be in the front but the image banner underneath is covering it. I tried playing around with z-index values but unfortunately it doesn't seem to be having an effect. Can someone help in identifying the issue? Store link to see the issue live: https://paxify-dev.myshopify.com/. Password is: paxify
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.