Question

我已经尝试更改图像和超链接的z-index而没有运气。如果我删除图像（girl.png）链接工作。我做错了什么？

     <table width="842" cellpadding="0" cellspacing="0" bgcolor="#f9a531" style="margin-bottom:0px; margin-top:50px; padding-right:20px;">
  <tr><td height="30" align="right" valign="middle"><a href="portfolio.html">PORTFOLIO</a>&nbsp;&nbsp;<a href="https://www.facebook.com/pages/Ashleys-Hair-Design/299450416776890https://www.facebook.com/pages/Ashleys-Hair-Design/299450416776890" target="_blank"><img src="http://ashleyshairdesign.ca/images/facebook.gif" height="18" width="8" border="0" alt="Ashley Hair Design facebook page"></a>
  <br />
  </td></tr>
  </table>
<!-- End top bar -->



    <table  width="842"  cellpadding="0" cellspacing="0" bgcolor="#e6e4e1" style="background-image:url(http://ashleyshairdesign.ca/images/bg1.gif); background-position:top; background-repeat:repeat-y; padding-top:30px;padding-left:50px; padding-right:30px;">

      <tr><td>
    <img src="http://ashleyshairdesign.ca/images/ashley.jpg" width="375" height="500" alt="Ashley Wright Hair Designer" align="middle">
        </td>      


      <td valign="top" align="left">
    <img src="http://ashleyshairdesign.ca/images/logo.png" width="290" height="131" border="0" alt="Ashley Hair Salon in Manotick"  vspace="0" />  
      <br /><br />
      <h3>
         613-715-HAIR (4247)<br />
         <a href="mailto:ashleywright63@mac.com" class="content-links">ashleywright63@mac.com</a><br />
         5562-B Manotick Main st. <br />
         Manotick, ON K4M 1B3<br />
      </h3>


      <img src="http://ashleyshairdesign.ca/images/hours.png" /><br />
      Tue 9:00 - 6:00<br />
      Wed - Thu 9:00 - 8:00<br />           
      Fri 9:00 - 6:00<br />
      Sat 9:00 - 4:00<br />
      Sun &amp; Mon - Closed<br /><br />
    <img src="http://ashleyshairdesign.ca/images/girl.png" alt="Ashleys Hair Salon" style="position:absolute; top:34%; left:53%;" class="transparent" />   
    <a href="http://www.schedulicity.com/Scheduling/Default.aspx?business=AHDZC3" title="Online scheduling" target="_blank"><img src="http://www.schedulicity.com/Business/Images/ScheduleNow_LG.png" alt="Schedule online now" border="0"  /></a> 
      </td></tr>
      <tr><td colspan="2" align="center">
        <br /><br />
      <h3 style="margin:0px;">Beauty and Personal care</h3>
      Experience in special occasion updos, contemporary styling and technical ability<br /><br /> 
    </td></tr>
      </table>

网站：ashleyshairdesign.ca

Answer 1

格式错误的HTML：

<div style="z-index:2;>"

Answer 2

你应该删除链接的div！没有必要在div中输出链接！

<div style="z-index:2;">link</div>
<a href="http://www.schedulicity.com/Scheduling/Default.aspx?business=AHDZC3" title="Online scheduling" target="_blank" style="z-index:3;position:absolute;">

在jsfiddle上查看您的工作代码：http://jsfiddle.net/r4xeH/1/

注意：z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）

修改

更新了jsfiddle！就像我注意到的那样，z-index只适用于定位元素！您没有定位<a href></a>，因此z-index从未对<a></a>元素起作用，这就是图像位于链接顶部的原因。

如果查看HTML，请尝试将样式放在CSS文件中，避免使用内联样式。也不要用于布局的表格。必须使用表格来显示数据，就像在Excel文件中一样。使用div代替并定位它们！

Answer 3

所以，我把你的代码剥离了：

<table width="842" cellpadding="0" cellspacing="0" bgcolor="#e6e4e1" >
    <tr>
        <td valign="top" align="left">
            <div style="z-index:2;>"
                <a href="http://www.schedulicity.com/Scheduling/Default.aspx?business=AHDZC3" title="Online scheduling" target="_blank">
                <img src="http://www.schedulicity.com/Business/Images/ScheduleNow_LG.png" alt="Schedule online now" border="0" />
                </a>
            </div>
        </td>
    </tr>
</table>

一切都被删除了，链接仍然无效。然后我纠正了一个错误：“转到 - ＆gt;移动”里面的＆gt;并且链接开始工作。

然后我将所有代码重新放入并进行了一次更改

<div style="z-index:2;">

该链接仍有效。

绝对图像顶部的链接变得不可点击

3 个答案: