I’m trying to created a sale text section similar to your hotspots tutorial for the white Datsun, motorcycle and Tbird images on https://mcgraphics.us/art/index3.html
A big part of my problem is that the sale sections show perfectly in PG and when I do a preview in browser but don’t work when uploaded.
Possibly z index: 9999 & positioning is my problem?
@kat - Can you post a screenshot of what it looks like in Pinegrow or the preview browser? I’m not completely sure what you are trying to achieve.
If you are trying to get the button and text to stay at the very top in the white area you need to restructure your HTML. You currently have a structure of:
div
img
div sale--main
div sale--xxxx
button sale--button
div sale--content
h3
One way to restructure would be to bring the h3 out a level and display it as inline block. You could then add the ‘sale–content’ class directly to the h3.
Basically, you want an outer container with relative positioning to give positioning in the flow. Then you want an inner container of absolute to hold the positioned content. Each piece of content can then be positioned within the inner container. You currently have ‘sale–main’ as your outer container. You could move the button and the h3 both inside the sale–content block and then position the sale-content block.
Cheers,
Bob
I had watched the 4 reasons your z-index isn’t working.Great video. Got the idea— relative parent, absolute child, but by that time my brain was at 10% capacity ; )
