Question

I want to deselect a transparent image to select the element behind it, without use the propriety z-index, please help me ! Here the Jsfiddle example.

Thanks!

Answer 1

Can’t you just bring the input to the front by changing it’s order?

HTML:

<input id="myinput" type="text" name="" value="SELECT ME PLEASE !"/>
<div id="menulogo"><img src="http://www.marcellokabora.com/web/wokomoko/img/menulogo.png"/></div>

CSS:

    #myinput{
    position: absolute;
    top: 130px;
    left: 260px;
    font-size: 20px;
}​
​

JSFiddle: http://jsfiddle.net/bW52t/

Else, use pointer-events to make the element “click-through”

HTML:

<div id="menulogo"><img src="http://www.marcellokabora.com/web/wokomoko/img/menulogo.png"/></div>
<input id="myinput" type="text" name="" value="SELECT ME PLEASE !"/>

​

CSS:

#menulogo,#menulogo  img{
    pointer-events: none;
}
#myinput{
    position: absolute;
    top: 130px;
    left: 260px;
    font-size: 20px;
}​

JSFiddle: http://jsfiddle.net/2m4Tx/