Unexpected z-index behavior

Beta
#1

Objects that should have their content behind other objects appear on top.

For example, I used one of the starter blog archive templates to create a layout. The default section background color appears behind the contained elements as it should, but when I check advanced, and add a background color or image it covers everything inside the section. This is happening within rows and columns as well.

I noticed a z-index of either 1 or auto being added to the containers and the x-bg upper and lower elements. I’m wondering if explicitly setting values is causing an issue. Everything behaved fine before. I only ever needed to look at the z-index on things in the past if I was trying to get a particular effect.

With values explicitly declared, anything I do behaves in unexpected ways in relation to the other elements of the page. The problem with the backgrounds of container elements appearing on top of what they contain is happening before I try any custom changes.

#2

@Sheri17, thanks for writing in! I think I’m following here, but do keep in mind that screenshots / live links always help us to see things so we can give a better response.

All that being said, there are a few things going on here. The advanced backgrounds that use the x-bg elements in the markup require a z-index to be set on their parent container, as they have z-index: -1, which forces them behind all markup within a parent. If the parent doesn’t have a z-index, it will “disappear” behind the parent.

In previous versions, we set the z-index of everything to 1 to ensure this always worked. Unfortunately, forcing everything to z-index: 1 has a litany of other undesirable side-effects, which have caused other issues with other users at times who were unaware of this.

Because of this, in this release we have changed all Layout Elements (Sections, Rows / Columns, Grids / Cells, Divs) to have a z-index value of auto by default. This can still be updated by users as needed, OR if an advanced background is enabled, we have a script that will update this value of auto to 1 to ensure that the advanced backgrounds display appropriately and don’t “disappear” as mentioned previously. This is to us the cleanest path forward to ensure things are auto stacking as they should by default in the browser, and the advanced backgrounds also don’t appear “broken” by changing it to 1 when enabled.

If this doesn’t quite address the situation you’ve described above, please feel free to write back in with more information and resources and I’ll be happy to take a closer look at things.

Thanks!

#3

Thanks for the detailed explanation now that I know how everything is defined, I’ve adjusted how I make my changes accordingly. Thanks!

#4

Ok great! Glad to hear that.