div内の画像の絶対位置を設定するには

Question

div内の少し近い画像の絶対位置を設定しようとしています（成功なし）。 divの内容が何であれ、画像はdivの左側に表示されます。内容は最大長= 8文字のテキストラベルです 問題：画像の位置はテキストの長さに依存します。テキストは「ER」であれば、テキストは「エリカ」

div.TAG { 
    border-radius: 3px; 
    border: 1px solid #FF00FF; 
    background: #FF99FF; 
    color: #FF00FF; 
    width: 60px; 
    height: 17px; 
    float:left; 
    padding: 1px; 
    box-shadow: 3px 3px 5px #555; 
    z-index: 1; 
    margin: 3px; 
} 

.icon_suppr { 
    display: inline-block; 
    height: 12px; 
    width: 12px; 
    position:relative; top:0px; left:35px; 
} 

<div class="TAG"> 
    ERIC 
    <img src="close-icon.png" class="icon_suppr"/> 
</div> 

任意のアイデアであればdemo jsfiddle 私は画像の位置をしたいと思いは同じです??

Answer 1

に絶対にだけposition: absoluteとposition: relativeの親に子を設定します。 I上記の例で

Example

のみデモのビットより大きいdivしました。親divの常にtop:0とleft: 35pxになります。

div.TAG { 
 
    position: relative;  /* <---- added */ 
 
    border-radius: 3px; 
 
    border: 1px solid #FF00FF; 
 
    background: #FF99FF; 
 
    color: #FF00FF; 
 
    width: 60px; 
 
    /* Evite que texte dépasse de la div */ 
 
    height: 17px; 
 
    float: left; 
 
    padding: 1px; 
 
    box-shadow: 3px 3px 5px #555; 
 
    z-index: 1; 
 
    margin: 3px; 
 
} 
 

 
.icon_suppr { 
 
    display: inline-block; 
 
    height: 12px; 
 
    width: 12px; 
 
    position: absolute;  /* <---- added */ 
 
    top: 0px; 
 
    left: 35px; 
 
}

<div class="TAG"> 
 
    ERIC 
 
    <img src="close-icon.png" class="icon_suppr" /> 
 
</div>

Answer 2

あなたの<img>は相対的に配置されています。つまり、その前に要素が何であるかに基づいて配置されます。絶対にあなたがポジションを追加する必要があり、画像配置するには：あなたのicon_supprクラス

.icon_suppr { 
    display: inline-block; 
    height: 12px; 
    width: 12px; 
    position:absolute; top:0px; left:35px; 
} 

Answer 3

あなたは別の内部の画像を設定したい場合は、絶対にDIV、あなたはそれに相対/絶対/固定位置を追加する必要があり、親

div.TAG { 
     border-radius: 3px; 
     border: 1px solid #FF00FF; 
     background: #FF99FF; 
     color: #FF00FF; 
     width: 60px; /* Evite que texte dépasse de la div */ 
     height: 17px; 
     float:left; 
     padding: 1px; 
     box-shadow: 3px 3px 5px #555; 
     z-index: 1; 
     margin: 3px; 
     position:relative; 
    } 

    .icon_suppr { 
     display: inline-block; 
     height: 12px; 
     width: 12px; 
     position:absolute; top:0px; left:35px; 
    } 

Answer 4

は.TAGにposition: relativeを追加しますが、position: absoluteています〜.icon_suppr

Result