CODEWITHSUNDEEP
htmlcssonclickz-index
Alkanshel
Alkanshel

Reputation: 4429

Onclick usage for low z-index elements

Here is my issue--I need to somehow access the onclick of an item that is covered by another element of higher z-index. I know this is going against the point of z-index, but any ideas?

In the below example, only the small top-sliver of the red box is clickable. I have a webpage design where tabs that need to be clickable are overlaid by an artsy bar... I'd love if there were a way (maybe some javascript trick?) to use onclick for these obscured, lower z-index elements without changing any positioning, though my gut feeling isn't good. 

<html>
<head>
    <style type="text/css">

        #bg {
            position:absolute;
            width:500px;
            height:500px;
            background:pink;
        }
        #under {
            cursor:pointer;
            margin-top:-10px;
            background:red;
            width:50px;
            height:50px;
            z-index:0;
        }
        #over {
            position:absolute;
            width:900px;
            height:50px;
            margin-top:10px;
            z-index:100;
        }
    </style>
</head>
<body>
    <div id="bg">
        <div id="under" onclick="alert('hi');">aaa</div>
    </div>
    <div id="over"></div>
</body>

Upvotes: 1

Views: 3447

Answers (2)

Stan Rogers
Stan Rogers

Reputation: 2170

The usual replacement method is to place the "over" elements (positioned absolutely) inside the "under" elements (positioned either relatively or absolutely) and make the content the same size (Gilder/Levin Image Replacement).

Upvotes: 0

Stephan K.
Stephan K.

Reputation: 15732

I would do it with a transparent PNG inside a DIV above the artsy bar with the same dimensions as your clickable lowest z-index DIV.

Be aware of Internet Explorer Issues.

I used the technique many times.

Upvotes: 1

Related Questions