Question

这是我的问题 - 我需要以某种方式访问由更高z-index的另一个元素覆盖的项目的onclick。我知道这与z-index相反，但任何想法？

在下面的示例中，只有红色框的小顶部可以点击。我有一个网页设计，其中需要可点击的标签被艺术栏覆盖...我喜欢如果有一种方法（可能是一些javascript技巧？）使用onclick这些模糊的，较低的z-index元素没有改变任何定位，虽然我的直觉不好。

<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>

Answer 1

我会在艺术栏上方的DIV内部使用透明PNG，其尺寸与可点击的最低z-index DIV相同。

了解Internet Explorer问题。

我多次使用这种技术。

Answer 2

通常的替换方法是将“over”元素（绝对定位）放在“under”元素内（相对或绝对定位）并使内容具有相同的大小（Gilder/Levin Image Replacement）。

用于低z-index元素的Onclick用法

2 个答案: