кнопка закрытия позиции внутри изображения

Question

кнопка закрытия позиции внутри изображения

0

Я пытаюсь поставить якорь в верхнем правом углу изображения. Это мое мнение:

<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>

Я попробовал установить положение position и положение абсолютного абсолютного, но теперь он работает. Я забыл сказать, что я использую bootstrap 3

user3429546 05 май 2014, в 17:27

Источник

Теги:

php

html

css

twitter-bootstrap-3

2 ответа

Ещё вопросы

jme11 · Answer 1 · 2014-05-05T14-03-00.000Z

Чтобы позиционировать что-то абсолютно (это то, что вы хотите сделать), он должен иметь контейнер, который также имеет позиционирование, установленное для позиции. Звучит сложно, но это не так.

Если вы установили свой контейнер в положение: относительное (это означает, что он находится в потоке документа, где он обычно был), вы можете установить элементы-потомки в положение: абсолютное.

Итак, в вашем случае, если вы оберните изображение и кнопку в div и установите div в положение: relative, вы можете установить кнопку в положение: абсолютное, как это:

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

Alan · Answer 2 · 2014-05-05T13-32-00.000Z

Почему бы просто не использовать карту изображений? 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/