div中div中的不可点击图标

时间:2014-02-06 04:22:20

标签: css html z-index

如何获取社交图标可点击的任何想法?我知道如果删除主#artistheader,图标将变为可点击,但#artistheader具有标题BG图像。

<!--Begin Artist Header-->
<div id="artistheader">
  <div id="artistimage"><img src="../images/ykmfull.png" alt="YKM"></div>
  <div id="artistname"><center><img src="../images/ykmName.png" alt="YKM"></center></div>
  <div id="artistSocial"><center>
    <a href="https://www.facebook.com/YoungKingsCompany" target="_blank"><img src="../images/fb.png" alt="fb" width="50" border="0"></a><a href="http://www.twitter.com/youngkingsmula" target="_blank"><img src="../images/twitter.png" alt="tw" width="50"></a><img src="../images/insta.png" alt="insta" width="50"></center></div>
<!--artist header end--></div>

我添加了相对定位和z-index,试图找到原来不存在的解决方案。

#artistheader {
   position: relative;
   z-index: -45;
   clear: both;
   float: left;
   margin-left: 0;
   width: 100%;
   display: block;
}

#artistimage {
  clear: both;
  float: left;
  margin-left: 8.4249%;
  width: 24.1758%;
  display: block;
}
#artistname {
  clear: none;
  float: left;
  margin-left: 9.5238%;
  width: 41.0256%;
  display: block;
  margin-top: 7%;
}
#artistSocial {
  position: relative;
  z-index: 5000;
  clear: none;
  float: left;
  margin-left: 9.5238%;
  width: 41.0256%;
  display: block;
}
#fb {
  position: relative;
  z-index: 5000;
  clear: none;
  float: left;
  margin-left: 26.3736%;
  width: 32.6007%;
  display: block;
}
#tw {
  clear: none;
  float: left;
  margin-left: 1.0989%;
  width: 15.7509%;
  display: block;
}
#insta {
  clear: none;
  float: left;
  margin-left: 1.0989%;
  width: 15.7509%;
  display: block;
}

1 个答案:

答案 0 :(得分:0)

#artistheader的双重实例已存在。页面上的源代码中有1个,CSS中有1个。在删除CSS上的规则并将其保留在源代码中时,链接再次起作用。不确定第二个实例来自哪里(源代码中的一个),而且我离开的时间并不重要,但因为我对源代码中的模糊效果保留了它。我假设两者相互冲突,然后只是“冻结”那一部分。