Have Geek Brain

The overlapping div is covering the image and making it invisible

I have a div that is absolutely positioned so I can position it overlapping the image. the problem is that the empty part of the div makes the image below it invisible. in IE the image is still clickable, but in FF or chrome it is not /

+2


a source to share


3 answers


Add position: relative;

to image. Here 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>
+1


a source


You cannot fix this with CSS alone. The easiest way is to set the onclick div event to the same function as your onclick image.



0


a source


You can use an experimental CSS4 feature pointer-events:none

for your absolute element. The problem with this feature is that it doesn't work in all browsers, only Firefox and Chrome as far as I know. Just share information :)

0


a source






More articles:


All Articles