I've got a container DIV which has a position of relative. Inside this a text input box and another DIV (resultsContainer). This second DIV has position absolute, z-index of 9999 and has children DIV's added by JS fetch response looping through JSON data.
It works on desktop/laptop browers fine.
The resultsContainer is showing on top of everything fine and provides a list of options.
When on IOS Chrome is shows behind everything else on the page? (as if z-index is being ignored.
I've googled it, gave me this option
I have a way of highlighting text. I position a red box with z-index of -2 where the text should be. This usually works, but not when there is a span element around the text, with an attribute such as: style="background-color:#ffffff". It seem in this case that the red box is covered up. Here is the actual HTML that does not work:
im new here and im not a webmaster nor like it. i have a small website (www.beatassist.eu) and i use the website builder. Although one thing my service is not good is in the navigation menu, so i decided to create one but i cannot make submenus. The problem is i create all menu with submenus, then in my website builder i have a form where to put the scripts (all good), but when i check the menu the submenus appear behind all other things.
I'm basically new to z-index, and I am trying to get z-index to work on a site in development.
Please go to this page, work in progress: development site
It has been successfully validated as HTML5
This is a Joomla CMS responsive site (Gantry/Rockettheme).
I have a problem with displaying borders:
Here is my page:
When you hover the mouse over the boxes on the right, the whole border all around should turn red, but it doesn't.
I tried it with "z-index" and "position", but no change. Is there a pure CSS solution?
By the way, I don't care about IE. It should work on firefox and possibly on other browsers (exept IE).