Question

我有一个包含图片的正方形，每张图片都应该是可点击的，可以带你到那个人的个人资料，但我的左上角图片是不可点击的。我不确定我做错了什么。

这是我的jsfiddle，因此您可以看到问题。

<div id = 'crew_div'>
    <div class = 'my_crew'><div id = 'jason'><a href = 'http://www.startingtofeelit.com/author/musicmakesmelosectrl/'><img src='http://www.startingtofeelit.com/profile/jason.jpg' title = 'View Posts by Jason'></a></div></div>
    <div class = 'my_crew'><div id = 'dharam'><a href = 'http://www.startingtofeelit.com/author/4everevolution/'><img src='http://www.startingtofeelit.com/profile/dharam.png' title = 'View Posts by Dharam'></a></div></div>
    <div class = 'my_crew'><div id = 'james'><a href='http://www.startingtofeelit.com/author/jjstiles/'><img src='http://www.startingtofeelit.com/profile/james.png' title = 'View Posts by James'></a></div></div>
    <div class = 'my_crew'><div id = 'cody'><a href='http://www.startingtofeelit.com/author/codecray/'><img src='http://www.startingtofeelit.com/profile/Cody.jpg' title = 'View Posts by Cody'></a></div></div>
</div>

#crew_div {
    position:relative;
    width: 312px;
    height:312px;   
}

.my_crew {
    position:absolute;  
}

.my_crew img {
    width:156px;
    display:block;  
}

.my_crew #jason {
    top:0px;
    left:0px;
    position:relative;
}

.my_crew #dharam {
    top:0px;
    left:156px;
    position:relative;
}

.my_crew #james {
    top: 156px;
    left: 0px;  
    position:relative;
}

.my_crew #cody {
    top:156px;
    left:156px;
    position:relative;
}

Answer 1

为您的图片添加z-index，如下所示：

.my_crew #jason {
    top:0px;
    left:0px;
    position:relative;
    z-index: 1;
}

Answer 2

这是你需要的，我重新整理了你的HTML：）

New Fiddle

<div id = 'crew_div'>
<a href = 'http://www.startingtofeelit.com/author/musicmakesmelosectrl/'><div class = 'my_crew'><div id = 'jason'><img src='http://www.startingtofeelit.com/profile/jason.jpg' title = 'View Posts by Jason'></div></div></a>
        <a href = 'http://www.startingtofeelit.com/author/4everevolution/'><div class = 'my_crew'><div id = 'dharam'><img src='http://www.startingtofeelit.com/profile/dharam.png' title = 'View Posts by Dharam'></div></div></a>
        <a href='http://www.startingtofeelit.com/author/jjstiles/'><div class = 'my_crew'><div id = 'james'><img src='http://www.startingtofeelit.com/profile/james.png' title = 'View Posts by James'></div></div></a>
        <a href='http://www.startingtofeelit.com/author/codecray/'><div class = 'my_crew'><div id = 'cody'><img src='http://www.startingtofeelit.com/profile/Cody.jpg' title = 'View Posts by Cody'></div></div></a>

Answer 3

你为什么不把它们漂浮在一起？这也将节省一些CSS。

.my_crew {
    float:left;
}

示例：http://jsfiddle.net/T5LCm/

Answer 4

您尚未指定<div class="my_crew">的宽度/高度尺寸或左/右定位。它们各自位于左上角，然后它们的子<div>相对于绝对定位的父项定位。这就是为什么左上角不可点击的原因，因为它真的堆叠在另外3个<div>之下。

更好的解决方案是将两个<div>合并为一个。

请参阅此处的小提琴：http://jsfiddle.net/R4HJb/8/

<div id = 'crew_div'>
    <div class = 'my_crew jason'><a href = 'http://www.startingtofeelit.com/author/musicmakesmelosectrl/'><img src='http://www.startingtofeelit.com/profile/jason.jpg' title = 'View Posts by Jason'></a></div>
            <div class = 'my_crew dharam'><a href = 'http://www.startingtofeelit.com/author/4everevolution/'><img src='http://www.startingtofeelit.com/profile/dharam.png' title = 'View Posts by Dharam'></a></div>
            <div class = 'my_crew james'><a href='http://www.startingtofeelit.com/author/jjstiles/'><img src='http://www.startingtofeelit.com/profile/james.png' title = 'View Posts by James'></a></div>
            <div class = 'my_crew cody'><a href='http://www.startingtofeelit.com/author/codecray/'><img src='http://www.startingtofeelit.com/profile/Cody.jpg' title = 'View Posts by Cody'></a></div>
</div>

#crew_div {
    position:relative;
    width: 312px;
    height:312px;   
}

.my_crew {
    position:absolute;  
    width: 156px;
    height: 156px;
}

.my_crew img {
    width:156px;
    display:block;  
}

.my_crew.jason {
    top:0px;
    left:0px;
}

.my_crew.dharam {
    top:0px;
    left:156px;
}

.my_crew.james {
    top: 156px;
    left: 0px;  
}

.my_crew.cody {
    top:156px;
    left:156px;
}

为什么我的第一张图片无法点击？

4 个答案: