低 z-index 元素的 Onclick 用法

发布于 2024-09-24 20:49:26 字数 1022 浏览 5 评论 0 原文

这是我的问题——我需要以某种方式访问被另一个更高 z-index 元素覆盖的项目的 onclick。我知道这违背了 z-index 的观点，但是有什么想法吗？

在下面的示例中，只有红色框顶部的小条子是可单击的。我有一个网页设计，其中需要可点击的选项卡被艺术栏覆盖...我很高兴是否有一种方法（也许是一些 javascript 技巧？）对这些模糊的、较低的 z-index 元素使用 onclick ，而无需改变任何定位，尽管我的直觉不太好。

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

原文

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>