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和链接/图片-1。

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

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

Answer 2

我可以建议替代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/

很抱歉更改了类名（并提出了愚蠢的名字）。你应该给这些类适当的名字。

Answer 3

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

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

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

3 个答案: