带 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 设置为正文。现在，正文有 z-index: 0 和 link/image -1.

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

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

Answer 2

如何像 .bear {opacitiy: 0;} 一样使用 opacity 属性？

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

Answer 3

我可以建议您的 HTML 结构的替代方案吗？在我看来，.bear 不应包含在 .main-div 中，因为它在视觉上不包含在容器中。

您可以像这样重组 HTML 来获得想要的结果：

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

CSS

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

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

很抱歉更改 class 名称（并提出了愚蠢的名称）。您应该给 classes 适当的名称。

带 z-index 的可点击图像：-1

Clickable image with z-index: -1

html

css

position

z-index