CSS on top of Kinetic Layer

Question

I have a Kinetic layer with rect/paths and in the process of implementing a live search feature in the top navigation area, when the results div appears the div has an opaqueness to it.

My Kinetic layer has an opacity of 0.4 so I am guessing the CSS is inheriting from the Kinetic layer?

var mapLayer = new Kinetic.Layer({
    x: 0,
    y: 0,
    scale: 1,
    opacity: 0.4
});

And the results div is:

#results {
    display: block;
    width:250px;
    z-index:999;
    height:80px;
    background-color: #CCDDDD;
    opacity:1;
}

The layer rect/paths have mouseover events so I would also like these to be ignored when the search results appear:

rect3.on('mouseover', function () {
    //alert("Mouseover");
    this.setFill('#FFDD00');
    this.setOpacity(1);
    //this.moveTo(topLayer);
    mapLayer.draw();
});

I have put together a JSFiddle which shows what is happening.

http://jsfiddle.net/matt_65/kT32e/

Answer 1

Add position:relative to your #results div and it should work - z-index will only apply to positioned elements:

Fixed fiddle