Bricks Version: 1.6.2
Browser: Brave
OS: Windows
URL: Forest Retreats password jacqui
I’ve added a popup to this page, its in a query loop so there are 3 instances.
For some reason some of the main page content overlaps the popup content. I can’t see a z-index or position issue.
Should look like this:
But looks like this
Here is the structure:
Thanks
This is still an unresolved bug.
Here’s a demo of my changing z-index to no avail
If I change the z-index of the overlapping element from 1 to 0 it fixes the issue but breaks the design of the page
Hi Macky,
As you have discovered the issue, the popup get overlaps with another div because of the popup’s parent z-index:1 is limiting it’s z-index:10000.
Suggest you use another way to achieve the design. I believe flexbox with order sequence will easily solve the problem.
A very good explanation about z-index:
Hope this helps.
As this is not a bug of Bricks, I will mark this thread as “No Bug”.
Regards,
Jenn
Thanks @itchycode, the problem is this (from Bricks Academy):
NOTE: Template element must be placed as the sibling / sibling’s child (layout structure) of the interaction element. Otherwise, the popup will not be triggered.
So therefore I need to break my design (ie move the button) and move the template to the root of the section element for my popup to not be affected by the parent z-index?
@itchycode I’ve just checked the guide that you linked to and the solutions stated there are:
Solution: Move the modal outside of the content parent, and into the main stacking context of the page.
If I do this I would also have to move the button that activates it, breaking my design
Alternative Solution: Remove positioning from the content, so it won’t limit the modal’s z-index.
If I do this, I break my design.
If this isn’t a bug then forcing the modal to be inline with the triggering element is a very limiting design choice. I’ll add to feature requests and write my own JS for the modal
Hi Macky,
Thanks for the feedback and also the improvement request.
We will look into it.
May I know if changing the z-index way to flexbox order works? By doing this, you could use the Bricks native popup and at the same time fulfill your design too right?
Of course, in the end, it’s your decision to see which approach is more effective and less time-consuming. Me personally will go for CSS way rather then writing lots of JS 
Regards,
Jenn
@itchycode Thanks for getting back to me, can you clarify what you mean by ‘May I know if changing the z-index way to flexbox order works?’?
I would also prefer to fix this with CSS, but don’t know how with the current design. I might be able to build the section layout again without using z-index, but ideally (in general) z-index can be used with the popup element
Thanks
@itchycode Here’s a video showing that if I unset z-index the problem is fixed, is that what you were asking?
Ah I think I understand.
So for accessibility reasons the content wrapper is before the media block in every instance, so it’s not an ideal solution to have them the other way around. That’s why I’m using z-index and order on nth-of-type(even) to keep the HTML order when the sections alternate, and to keep the content wrapper on top of the media block
@itchycode I’ve managed to come up with a solution that is OK for this situation. I moved the popup template element outside of the div with z-index and instead of triggering the popup with a button click, its now triggered by a click anywhere in the section. This way I was able to keep to the popup rule that the trigger needs to be a sibling or child of sibling and have the popup no longer overlapped by the main page content.
Ideally this limiting rule will be overcome in future updates 
Thanks
