html - CSS fixed element appears underneath content -

i have div element pops when clicking on icon. works fine on desktop. when i'm trying on mobile appears underneath content instead of above, although elements z-index set 5000.

it seems ends underneath when running on webkit-based browser. first thought depending on height of page it's when i'm running chrome in device toolbar , phones i've tested.

it should this. it's popup appears when click info button in footer:

the css box/popup element class cms-footer-info popup/box:

position: fixed; background-color: #444445; color: #fff; height: auto; display: block; left: 1%; bottom: 60px; padding: 2%; z-index: 4000; 

html the footer :

<div class="footer">      <div class="footer-column-one">         <i class="fa fa-globe fa-3x" aria-hidden="true"></i>         <div class="cms-links">            <h6>document identity</h6>            <div>               <span class="cms-footer-info-0-label">something</span>               <span class="cms-footer-info-0-value">else</span>            </div>         </div>      </div>      <div class="cms-footer-center">         <div class="cms-footer-center-0">some text </div>      </div>      <div class="footer-column-three">         <i class="fa fa-info-circle fa-3x" aria-hidden="true"></i>         <div class="cms-footer-info">            <h6>document identity</h6>            <div class="cms-footer-info-0">               <span class="cms-footer-info-0-label">publ. no. </span>               <span class="cms-footer-info-0-value">t810181</span>            </div>            <div class="cms-footer-info-1">               <span class="cms-footer-info-1-label">label</span>               <span class="cms-footer-info-1-value">value </span>            </div>         </div>      </div>   </div> 

the content underneath pop has static layout , has no z-index:

the css:

margin-bottom: 65px; margin-left: auto; margin-right: auto; max-width: 700px; display: block; 

the html:

<div class="container">    <div>     alot of text. wrapped in spans, divs , on.    </div> </div> 

any tips appreciated. thank you!

link working example: working example

when have loaded site. try pressing info or globe icon in bottom. show relevant popups, open developer console , choose toggle device toolbar top left corner in developer console in chrome or visit url on phone.

take out overflow:hidden; footer. solved me.