Update to Pro 6.0.2 problems with auto and -1 z-index

Hi,

I have noticed when upgrading 5.1.5 to 6.0.2 that some background images (dynamic content - feature image) in layouts are being hidden due to z-index auto or -1 positioning the image behind its container. manually setting the z-index to 1 resolves the issue but often creates other positioning issues

Yeah we’ve had this come up. A lot of our templates were already setting the Z so I’ve been determining what was the default intent is. Could you get me some screenshots of your setup? What’s everybodys ideal situation for background images? “auto” just works like you think it would? “auto” uses 1 to fix this issue? It defaults to 1 z-index?

Hi Charlie,

This example is actually a site that my wife is working on to learn Pro. I don’t have screenshots etc at the moment, but I will try replicating the issue on a test site and give you screenshots/video

one of the instances was a column with an absolute positioned div (background image) and an headline (ie text over background image). The div had a z-index of -1 after the update that effectively hid the background image totally. changing to z-index of zero didn’t work, changing the div to z-index =1 showed the background image but hid the text.

Pretty much every example I have seen so far of this problem was due to the background image being hidden when upgraded to 6.0.2

As I said, I’ll have a dig around and see if I can re-create the problem for you

1 Like

Sorry I have not had a chance to replicate this but just wanted to say that 2 others in the FB group have experienced the same problem. Backgrounds being set to a z-index of -1 on upgrading to 6.02

2 Likes

Not 100% the same issue but possibly related. When updating from 5.1.5 to 6.0.2 I noticed on sites where I used negative margin on a row to overlap a section (which has been working fine for a long time) were being cutoff. Examples below.




Setting z-index to 2 appears to have solved it but definitely wasn’t an issue before.

2 Likes

I have had the same issue with custom code that worked in a hand built custom PHP project. During this beta I rebuilt the site into WordPress. Initially the custom CSS I used worked fine but after an update I had to adjust my CSS. There is a thread somewhere but I’m pretty sure this is the same thing.

This was my thread. The issue started between Beta 3 and Beta 4…

2 Likes

That’s a pretty looking site btw.

2 Likes

Thanks @JvP :smiley:

1 Like

I will be taking a look at the Z-Index issue this week. Thanks everybody for the info this will help me.

1 Like

Okay the upper layer is going to have auto set correctly in another div. Will release in 6.0.4. If you used a negative z-index to fix nothing will break. Thanks everybody!

image

1 Like

We did change row rendering in beta to better support the breakpoints so that jives.
@urchindesign Does that CSS in question still demonstrate the issue?
Is it safe to say that Row’s z-index are too low now? I’m sure it’ll be more clear when I recreate your issues.

@charlie I think so. Just posted as it demonstrated the same issue and I had picked up the issue at a specific point in time. Something between the two beta’s changed.

I will double check on that specific site when I have a chance later today.

Yes it does. Just changed my CSS on the site to z-index: -1 and the issue is still present in 6.0.3.

1 Like