0

我试图理解为什么以下示例不支持单击 Chrome 25.0 或 Firefox 18 中的按钮。它适用于 IE 9/10。

我觉得好像我错过了一些非常基本的东西。Z指数？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        html, body {
            height: 100%;
            margin: 0px;
            overflow: hidden;
            width: 100%;
        }

        .top {
            height: 100%;
            width: 100%;
            overflow: hidden;
            background: gold;
            text-align: center;
            vertical-align: middle;
            z-index: 1;
        }
        .left {
            float: left;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            width: 80%;
        }

        .right {
            float: right;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="top">
        <button id="btn" onclick="alert('hello')">Click Me!</button>
    </div>
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</body>
</html>
4

1 回答 1

4

z-index 属性仅适用于定位元素，因此请添加类似position:relative;#top div 的内容。

jsFiddle 示例

另一种方法是应用于pointer-events:none;您的#left div，以便单击传递到其下方的元素。

jsFiddle 示例

于 2013-03-08T02:40:25.520 回答