將圖標容器在圖像 - 左上和右上

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