Question

// This is the code in html part

<canvas id="canvas" width="684" height="606" style="background-color:#999999">

</canvas>
<a href="links/animation.html"><div style="width: 630px;height: 130px;" id="animation"></div></a>
<a href="pa1.html"><div style="width: 630px;height: 190px;" id="PA"></div></a>
<a href="web.html"><div style="width: 630px;height: 135px;" id="web"></div></a>

//This is the code in css part
#PA{
  position:relative;
  top:-545px;
  left:480px;
}
#web{
  position:relative;
  top:-510px;
  left:460px;
}
#animation{
  position:relative;
  top:-590px;
  left:460px;
}

此代码在canvas中创建了超链接。但它在canvas标记之后占用了空格。我尝试了所有的例子。但它不起作用。我的代码中有什么问题。

Answer 1

您可以使用position:absolute;，<a>相对于document的位置，如下所示：

a:nth-of-type(1){
  position:absolute;
  top:50px;
  left:50px;
  background:red;
}

a:nth-of-type(2){
  position:absolute;
  top:100px;
  left:100px; 
  background:pink;
}

a:nth-of-type(3){
  position:absolute;
  top:150px;
  left:150px; 
  background:purple;
}

canvas{
    border:1px solid black;
}

P.S。我从div内部删除了a，因为div s（块级元素）根本不属于内联元素。相反，如果需要，将a元素放在div内。（Further reading）

我们如何使用带有超链接标记的canvas标记

1 个答案: