I have two popup modals on one page, in different sections. The first popup modal in the top section of the page is for an embedded form when you click “find my size.” The second popup in the 2nd section on the page shows an expanded (full) view of a customer review when a user clicks “show more.” It pulls the review from a CMS corresponding to the review that the user clicks on to “show more.”
Here is the link: Webflow - wonder.do
Two z-index problems I can’t figure out:
-
Review popup - depending on which review’s “show more” the user clicks on, the popup modal shows up OVER all the reviews preceding and including the one clicked on to “show more,” but UNDER the remaining reviews to the right of it. This was NOT a problem in an earlier version of the page. However, I had a different z-index problem, (see #2), and in trying to fix #2, I ended up with this problem. Now, even if I reset every setting as it was BEFORE this problem started to happen, the problem does not go away (details below)
-
Since I have two popup modals in two different sections, I cannot get it so that both popup modals layer on top of ALL sections. I can get the modal in the 1st section to layer on top of all sections by setting the z index of the first section to the highest number over subsequent sections, but then the review popup modal in the second section goes behind the first (top) section, etc.
For #1, here are some things I tried:
-
Setting the relative z-index of the popup higher than the z-index of the div with the review content in the page under/within the collection item
-
Moving the popup before/after the customer review content div under/within the collection item and setting the z-index to auto, and then trying to set it to a higher number
-
Trying a bunch of position and z-index permutations across the elements within, to and above the collection list wrapper
-
Putting the popup modal inside it’s own collection list wrapper, calling the same CMS. Moving the popup outside of the same collection list wrapper, even if I call the same CMS, doesn’t work, clicking on “show more”
-
I went to a backup version of the page and reset all the style position settings to be exactly what they were when the review popup was showing over/on top of all the reviews. Resetting everything didn’t do anything, the same problem persists.
-
I read that opacity “creates a new stacking context” here Stacking context example 3 - CSS: Cascading Style Sheets | MDN , so, even though I have opacity set to either 0 or 100 in the interaction, I just removed that altogether
-
Since then, I’ve continued to try to fix the problem with zero success, depending on when you look at the page, the style/position settings might not look the same as the backup settings
For #2, here are some of the things I tried:
-
Setting each section to relative and the z-index (rel to itself) to either 0 or the same number for all the sections, then setting the z index higher for the popup modals. I set the section z-index to the same values because I understand that if one section has a higher z index than another section, then any child elements of the section with the lower z-index can never overlay the section with the higher z-index, regardless of what I set the child element z-index to.
-
Setting each section to relative and giving the top section (with the first popup) the highest z-index, with each subsequent section getting a lower z-index. This works for the popup in the first section but causes the popup in the second section to go behind the first section (as expected).
-
Putting all the sections under one div. I thought this might let me set each of their z-index to that div, but this can’t be done with relative, only if I use sticky or absolute or fixed. Absolute and fixed don’t work for the sections. I thought sticky might work because it can still present like relative/static for the content if I don’t touch the xy related position settings and if I set an element to sticky I can set the z-index according to it’s parent, but it didn’t work
-
I tried setting the sections to static and setting the position to relative at each of the children/sub-children in the hierarchy in each section to see if some permutation of this would work, after endless trial and error, I have run out of ideas
I’ve read through the documentation on z-index on developer.mozilla.org, but still have not been able to root cause my issues.
Problem #1:
etc. from left to right.
Before Problem Number 1 Happened - Backup Version - review popup overlays/is on top of all of the reviews in the review section:
Here is the link to the backup version where at least the review popup overlays all the other reviews in the section: Webflow - wonder.do
Problem #2 - Review popup goes under the first section (which happens because the first section has a higher z-index than the 2nd section, but what I can’t figure out is how to get both popups on the page to overlay all the sections, as I described above):
Any and all ideas are appreciated.