Question

我正在尝试为网站构建器创建一个元素，我可以在图像上放置一个图标：

左上：

-------
|*    |
|     |
-------

右上：

-------
|    *|
|     |
-------

我有以下html：

<article class="col-md-4 project selected-column" contenteditable="true">
  <figure class="member square">
    <div>
      <aside>
        <i class="sub_icon fa fa-asterisk circle" style=" font-size:18px; line-height:21px;"></i>
      </aside>
      <div class="image-container square-container">
        </div>
          <img class="img-responsive" style="margin:auto;" src="http://placehold.it/250x250&amp;text=Afbeelding">  
        </div>
      <figcaption>
        <h4 style="text-align:center;" contenteditable="true">Voer hier uw naam in</h4>
        <p style="text-align:center; font-style:italic;;" contenteditable="true">Voer hier uw subtitel in</p>
        <p style="text-align:center;" contenteditable="true">Voer hier uw titel in</p>
      </figcaption>
  </figure>
</article>

我有的CSS：

figure>div{
  display:table;
  margin:0 auto;
}

aside {
  position:absolute;
  width:40px;
  height:40px;
  background-color:#fff;
  text-align:center;
}

i {
  position:relative;
  top: calc(50% - 10px)
}

上面的代码将图标容器放在图像的左上方，这似乎是工作的一半。但是使用这个CSS和HTML，我无法将图标容器放在右上角。

如何设置此HTML的样式，以便我可以将图标放在左上角和右上角？

我有一个JSfiddle here

Answer 1

figure>div{
  display:table;
  position:relative;           /* new */
  margin:0 auto;
}

aside {
  position:absolute;
  width:40px;
  height:40px;
  right:0;                     /* new */
  background-color:#fff;
  text-align:center;
}

这是您更新的fiddle

将图标容器放在图像上 - 左上角和右上角

1 个答案: