HTML/CSS 图像链接不适用于绝对定位答案

【问题标题】：HTML/CSS image links don't work with absolute positioningHTML/CSS 图像链接不适用于绝对定位
【发布时间】：2015-10-27 07:02:54
【问题描述】：

我正在制作一个 epub3 固定布局。基本上是HTML/CSS的绝对定位。

我正在尝试将图像链接到网站，但链接不起作用。它仅适用于第三张图片（img.seed）。

例如，它在 Chrome 或 firefox 中不起作用。

这里是代码sn-p：

@font-face { font-family: "Source"; src: url("../fonts/Source.ttf"); }

body {
  width: 800px;
  height: 800px;
  margin: 0;
  background-color: #ffffff;
}
img {
  position: absolute;
  margin: 0;
  z-index: -1;
  height: auto;
  width: auto;
}
p {
  position: absolute;
  z-index: 10;
  margin: 0;
  padding: 0;
  font-family: "Source";
}
img.seed { top: 15.88%; left: 63.77%; }
img.bacteria { top: 15.39%; left: 7.32%; }
img.bee { top: 15.19%; left: 35.45%; }

<?xml version="1.0" encoding="UTF-8" ?>
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" lang="es">
    
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=800, height=800" />
        <title>Tittle</title>
        <link href="../Style/style.css" type="text/css" rel="stylesheet" />
    </head>
    
    <body epub:type="backmatter bibliography">
      <a href="http://www.booksbeck.com/travelling-seeds"><img class="seed" src="../Image/P999_seed.jpg" alt="page 23" /></a>
      <a href="http://www.booksbeck.com/bees-like-flowers"><img class="bee" src="../Image/P999_bee.jpg" alt="page 23" /></a>
      <a href="http://www.booksbeck.com/meet-bacteria"><img class="bacteria" src="../Image/P999_bacteria.jpg" alt="page 23" /></a>
    </body>
    
    </html>

【问题讨论】：

摆脱负 z-index。
谢谢。删除负 z-index，它现在可以工作了。

标签： html image css-position href absolute

【解决方案1】：

https://jsfiddle.net/chuux72f/

body {
    width: 800px;
    height: 800px;
    margin: 0;
    background-color: #ffffff;
}
a {
    position: absolute;
}
a.seed {
    top: 15.88%;
    left: 63.77%;
}
a.bacteria {
    top: 15.39%;
    left: 7.32%;
}
a.bee {
    top: 15.19%;
    left: 35.45%;
}

删除您的 z-index 并定位锚标签，而不是 imgs

【讨论】：

有效！谢谢！ “图书行业研究小组”的指南推荐 z-index=-1，因此图像始终位于背景中。