z-index and focus

anshul · July 27th, 2004, 02:15 PM

let the case of two <DIV>s super-imposed on each other.
u know that of both, whose z-index is lower, will get the focus like mouseover, mouseout etc.

but i want just that, <DIV> that has lower z-index, that is covered by <DIV> of higher z-index, should get the focus.

is this possible in JavaScript ?

ChrisScott · July 28th, 2004, 08:08 AM

Hi Anshul,

I don't think this is possible, altough you could create a transparent div (the same size & position as the bottom div) above the top div & handle the events there, something like...

Code:

<html>
    <head>
        <title>Test Full Width</title>
        <style type="text/css">
        #Upper, #Lower, #Transparent{
            position: absolute;
            width: 100px;
            height: 100px;
        }
        #Upper{
            left: 50px;
            top: 50px;
            z-index: 100;
            background-color: darkblue;
        }
        #Lower, #Transparent{
            left: 20px;
            top: 20px;
        }
        #Lower{
            z-index: 50;
            background-color: lightblue;
        }
        #Transparent{
            z-index: 100;
        }
        </style>
    </head>

    <body>
        <div id="Upper" onclick="alert('Upper clicked');"></div>
        <div id="Lower"></div>
        <div id="Transparent" onclick="alert('Transparent clicked');"></div>
    </body>
</html>

HTH,

Chris

anshul · July 29th, 2004, 02:31 AM

thank u4ur idea, ChrisScott. i'll c if it can fulfil me. thanx