Can you resolve a Z-index issue with overlapping elements in Shopify?

colinashvin
Excursionist
30 0 9

Hello.

 

I have a problem that I want to explain in a simplified manner.

 

Say we have two elements, both in the same hierarchy. each of them gets a position fixed at a certain point.

 

Parent 1 has many children  2 are my concern, Lets call them Child A and Child B.

 

Parent 1 : Wrapper of sticky nav for the website, fixed the moment you scroll

Child A: the sticky Nav .

Child B: Drawer cart

Parent 2: a popup notification from an APP

 

I want parent 2 to be above Child A, and below Child B.

 

Parent 1 must have high Z-index since its the navigation that sticks on scroll.

 

Can I have it that the order is ( Child A < Parent 2 < Child B )

 

 

To my understanding , to make parent 2 show up above Child A, it has to have higher z-index, however, if parent 1 has less z-index than parent 2, then parent 2 stays above child A & B. no matter what thier z-index are.

 

The code is long and I would post it if there is a possibility for a solution to this 

Reply 1 (1)

KetanKumar
Shopify Partner
36839 3635 11972

@colinashvin 

oh sorry any issue if possible to share issue image and store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing