Z-index CSS not working in Chrome or Firefox

[GilT]

Hi,

I’m trying to have content from a row overlap onto the following row.
First I added a negative top margin and padding to the row below.
I then added the following CSS:
.fl-col-content {
position: relative;
z-index: 10;
}

I found the code on Beaver Junction
Text boxes overlapping images – Beaver Junction for Beaver Builder Users

The result is the content from the top row overlaps onto the bottom row background. It all works nicely in Safari but not in Firefox or Chrome. In those browsers the content does not overlap. Is there a modified coding needed for it to work?

Any help would be greatly appreciated.

Thanks,
Gil

[GilT]

I defined the top row min height, and adjusted the margin/padding on both rows and it works across the browsers now.

Thanks