html - 带 z-index : -1 的可点击图像

Question

我认为这很简单，但不明白为什么我不能点击我的图片。

所以我有一个主 div 并且在它里面我有一个带有 position:absolute; 的图像将它放在 main-div< 之外一点.

问题是我的图片上有一个 anchor ，但由于某种原因无法点击。

我已经尝试给 img 和 div 两个正值 z-index 但仍然不起作用。

基本上我希望图片可以点击。

这是 demo

代码:

HTML

<div class="container main-div">
    <a href="www.google.com" target="_blank">
        <img src="http://www.mon-wallpaper.com/wp-content/uploads/Ourson.jpg" class="bear"/>
    </a>
</div>

CSS

.main-div{
    margin-bottom: 0px;
    height: 200px;;
    width:400px;
    background:white;
    border:6px solid #c8c8c8;
    background-color:white;
    position:relative;
}
.bear{
    z-index: -1;
    width:100px;
    position:absolute;
    left:-70px;
}

body{background-color:white;}

Answer 1

这是一个有点奇怪的解决方案，但您可以将 z-index: -2 设置为 body。现在，正文有 z-index: 0 和 link/image -1。

body{position: relative; z-index: -2}

http://jsfiddle.net/90ob5p85/1/