1

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

这是我的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;
}
4

4 回答 4

2

z-index像这样添加到您的图像中：

.my_crew #jason {
    top:0px;
    left:0px;
    position:relative;
    z-index: 1;
}
于 2013-02-28T23:00:24.343 回答
1

这是您需要的，我重新组织了您的 HTML :)

新小提琴

<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>

于 2013-02-28T23:00:10.767 回答
1

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

.my_crew {
    float:left;
}

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

于 2013-02-28T23:09:37.587 回答
1

You haven't specified width/height dimensions or top/left positioning for your <div class="my_crew">. They are each positioned at the top-left, and their child <div> is then positioned relative to the absolutely positioned parent. That's why the top-left isn't clickable, because it's really stacked under 3 other <div>s.

A better solution would be to combine the two <div>s into one.

See the fiddle here: 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;
}
于 2013-02-28T23:29:34.177 回答