Image + Text element overlapping issue (z-index ?!)

[asw]

I’m baffled as to why I cannot get consistent results for the following:

Circular image element floating above a square text area, populated via custom HTML code. Looking to obtain a ‘card’ style presentation.

For mobile compatibility, I have three versions of some of the elements to present correctly for desktop, tablet and mobile.… For some reason, the image floats above the text element on tablet, but not desktop and Mobile.

I’m certain this is a z-index issue, but that setting is only available ‘off the shelf’ at column level. I can’t be inserting my custom styling to each element correctly - any pointers welcome!

The page URL where I’m developing the design is here: https://www.bridginggaps.org/about/testimonials/ryan-watt/

Screenshot 1: Desktop result

Screenshot 2: Tablet result

Screenshot 3: Mobile Result

[rad]

Hi Alistair,

Thanks for reaching out.

It’s really quite weird, z-index will only work on fixed, relative, and absolute positioning and none of it is applied to your image and text elements. So I’m not sure why it works at all, changing z-index doesn’t have any effect too.

I noticed there are multiple images and content (for different device) so I cleaned it and reduced to single image and content and it still the same. This is not due to z-index, but can be forced by applying z-index and relative position. Example, please add this CSS to Theme Options > CSS

.force_top {
z-index: 99999 !important;
position: relative !important;
}

Then simply add force_top to your text element (not image element). You may also change your text background color as the other text has a solid background.

Thanks!

[asw]

Thank you Rad, sorted

[jade]

Glad to hear it’s sorted, Alistair.