我需要在我的站点上放置一个站点皮肤,其中在主要内容区域的左侧有一个 336x768 像素的图像,在主要内容区域的右侧有另一个图像。
我能够正确定位它,但我无法使图像可点击。我相信这与容器的 z-index 有关,但我没有运气调整它们。
我创建了一个 jsfiddle 来演示和展示我的代码: http://jsfiddle.net/puTEe/
通过点击左侧和右侧的图像,您应该点击指向 google/yahoo 的链接。
CSS:
.site-skin {
width: 96px;
height: 76px;
position: absolute;
z-index: -1;
}
#skin-right {
right: 0;
}
#main-container {
width: 96px;
height: 60px;
margin: auto;
}
HTML:
<div class="site-skin">
<a href="http://google.com">
<img src="http://placehold.it/96x76">
</a>
</div>
<div class="site-skin" id="skin-right">
<a href="http://yahoo.com">
<img src="http://placehold.it/96x76">
</a>
</div>
<div id="main-container">
main content
</div>
最佳答案
为什么要使用负 z-index?那是你的问题。使它们成为非负数,它们就可以正常工作。
请注意,负 z-index 值是允许的,但是由于您的 #main-container
没有设置 z-index,它默认为零并且实际上位于其他 div 之上页面的一侧。如果您在 #main-container
上设置较低的负 z-index(并定位它),这也可以解决您的问题,尽管在我看来,将您现在拥有的负 z-index 更改为积极的一个更有意义。
关于html - 在执行位置 : absolute 时使 div 图像可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12847060/