I have in the hero, 2 absolute positioned layers. One on the left side and one on the bottom. It seems to show on an android phone but with my iPhone, those two images won’t display.
Hi there,
When using absolute positioning, elements are removed from the normal document flow and positioned relative to their parent element. To make absolute positioning work correctly, the parent element must have its position set to either relative, absolute, or fixed. This creates a positioning context for the child element.
For responsive design, consider using relative units (%, vh, vw, em, rem) instead of fixed pixel widths. This ensures your elements adapt properly to different screen sizes. You can also combine absolute positioning with percentage-based values to maintain responsive behavior while achieving specific layout requirements.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Hey @Claire_Lee , this is a pretty common problem. Safari handles z-index differently from other browsers, so if you’re not careful, positioned elements will layer incorrectly. Start by setting a z-index on both these images. If the problem is still happening, go through your site and check that you have no duplicate z-indices, and that all the parent elements have an appropriate z-index set as well. Good luck !
Thank you for the suggestions!
I have set the following:
“section_header5” to relative | z-index: 4
“padding-global” to relative | z-index: 20
“absolute-bottom-right” absolute | z-index: 15 (with %s to move it to the right and bottom)
“absolute-top-left” absolute | z-index: 15 (again with %s to move it to the top and left)
I have the same graphic in the CTA section that shows on mobile, but I have not set any z-index but have the parent div set to relative with the graphic set to absolute without a z-index.
Although I do need to set z-indexes with the header due to there being multiple layers, the wavy graphics don’t seem to show on my mobile safari still.
Hey @Claire_Lee,
I was checking this site on Firefox browser and was not able to see the absolute-bottom-right image specifically, the other image was visible though. Setting a specific width for the that bottom-right image made it visible on the browser on my end. Just wanted to add this note.
1 Like
Thank you! I put a set width and height (% and rem) and it worked.
1 Like