html css z-index not working, what do I do wrong? -

i trying have 2 divs totally overlapping: 1 div menu controller, 1 div menu. menu controller catch mouse events, make menu div disappear, etc. have settled of already, cannot manage have controller div on top of menu div. check positioning, change background color of controller in order see if menu hidden.

my code @ following location: http://codepen.io/3mo/pen/mjkekg. main idea following:

   #menu {         z-index: 0;         top: 0px;         position: absolute;         width: 100%;         height: 150px;         background: linear-gradient(90deg, rgb(60, 60, 60) 40%, white 49%, white 51%, rgb(60, 60, 60) 60%);         background-repeat: no-repeat;         background-clip: text;         text-fill-color: transparent;         -webkit-background-clip: text;         -webkit-text-fill-color: transparent;         font-size: 16px;         cursor: auto;     }     #menucontroller {         z-index: 10;         top: 0px;         position: absolute;         width: 100%;         height: 150px;         background-color: red;     } 

i tried position:relative , position: absolute both divs, no luck far. can tell me wrong?

thanks!

i've managed create workaround issue using javascript since you're using lot. function need below. i'm hiding menucontroller moment, check beneath under click coordinates , showing again.

function registercontrollerclick() {     $(menucontroller).click(function(event) {       $(menucontroller).hide();       window.location.href = document.elementfrompoint(event.clientx, event.clienty).href;       $(menucontroller).show();      }); } 

add init code:

function init() {         registercontrollerover();         registercontrollerout();         registercontrollerclick();     } 

working example

if don't want go location specified href, trigger click event instead use jquery trigger('click') - take here