在图像内定位关闭按钮答案

【问题标题】：position close button inside a image在图像内定位关闭按钮
【发布时间】：2014-06-21 22:42:09
【问题描述】：

我正在尝试在图像的右上角放置一个锚点。这是我的看法：

<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

【问题讨论】：

标签： php html css twitter-bootstrap-3

【解决方案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/

【讨论】：

【解决方案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

【讨论】：