Question

我有一个绝对定位的div，所以我可以将它与图像重叠。问题是div的空白部分正在使其下面的图像不可点击。在IE中，图像仍然可以点击，但在FF或chrome中它不是/

Answer 1

将position: relative;添加到图像中。这是一个SSCCE，copy'n'paste'n'run it。

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2750416</title>
        <style>
            #overlap {
                position: absolute;
                width: 100%;
                height: 61px;
                background: pink;
            }
            img {
                position: relative; /* Without it, the image disappears "behind" div */
                float: right;
            }
        </style>
    </head>
    <body>
        <div id="overlap">Overlap</div>
        <img src="http://sstatic.net/so/img/logo.png" onclick="alert('Clickable!')">
    </body>
</html>

Answer 2

你无法通过CSS解决这个问题。最简单的方法是将div onclick事件设置为与图像onclick相同的功能。

Answer 3

您可以在绝对元素上使用CSS4实验性功能pointer-events:none。这个功能的问题在于它并不适用于所有浏览器，只有firefox和chrome据我所知。只是分享一些信息：）

重叠div覆盖图像并使其不可点击

3 个答案: