Question

我试图在图片的右上角放置一个锚点。这是我的观点：

<div class="table">
    <tr>
    <?php foreach ($q as $row) 
    {
        $var = $row->path;
        $info = pathinfo($var);

        echo '<td><a href="#" style= "position:relative">
                <img src="'.base_url().'images/thumbs/'.$info['basename'].'"/>
              </a>'.anchor('gallery/remove_photo/'.$row->id,'<i class="icon-remove"></i>','class="close"').'</td>';

        }?>
    </tr>
    </div>

我试过通过设置位置相对和锚的位置绝对但它现在有效。我忘了说我使用bootstrap 3

Answer 1

为什么不使用图像地图？ http://www.w3schools.com/tags/tag_map.asp

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

如果需要，甚至还有一些不错的在线工具可以找到这样的坐标。

http://www.image-maps.com/

Answer 2

要绝对定位（这是你想要做的事情），它必须有一个容器，它也有定位设置来定位自己。听起来很复杂，但事实并非如此。

如果将容器设置为position：relative（意味着将其保存在文档的正常流程中），则可以将后代元素设置为position：absolute。

因此，在您的情况下，如果您将图像和按钮包装在div中并将div设置为position：relative，则可以将按钮设置为position：absolute，如下所示：

<div style="position: relative;"> 
  <img src="yourimagename.jpg" alt="">
  <button style="position: absolute; top: 0; right: 0; z-index: 1;">&times</button>
</div

在图像内的位置关闭按钮

2 个答案: