Menu
I'm having an issue with a responsive dropdown menu, based on wordpress Underscores theme.
It looks okay on desktop but not on iOS Safari including iPad and iPhone.
I've tried to add z-index to other divs as well but it doesn't work. Please help me. Thanks.
800
In Safari, it seems that the z-index is not taken into consideration at all.
You set z-index on a static element By default, every element has a position of static. z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.
Z Index ( z-index ) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Note: Z index only works on positioned elements ( position:absolute , position:relative , or position:fixed ).
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
There is actually a fourth method, with translate3d:
-webkit-transform: translate3d(0,0,1px);
transform: translate3d(0,0,1px);
iOS browsers fully support CSS3, so you can use this safely.
67
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
