I have a Div element that pops up when clicking on a icon. This works fine on desktop. But when I'm trying it on mobile it appears underneath the content instead of above, although the elements z-index is set to 5000.
It seems like it only ends up underneath when running on a webkit-based browser. First I thought it was depending on the height of the page but it's only when i'm running chrome in device toolbar and all phones that I've tested.
It should look like this. It's a popup that appears when you click the Info button in the footer:
The css for the box/popup is element with class cms-footer-info is the popup/box:
position: fixed;
background-color: #444445;
color: #fff;
height: auto;
display: block;
left: 1%;
bottom: 60px;
padding: 2%;
z-index: 4000;
Html for the the footer :
The content underneath the pop up has static layout and has no z-index:
The css:
margin-bottom: 65px;
margin-left: auto;
margin-right: auto;
max-width: 700px;
display: block;
The html:
Alot of text. Wrapped in spans, divs and so on.
Any tips are greatly appreciated. Thank you!
Link to working example: Working example
When you have loaded the site. Try pressing the info or globe icon in the bottom. It will show you the relevant popups, now open the developer console and choose toggle device toolbar top left corner in the developer console in Chrome or visit the url on a phone.
JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)
