如何在div內設置圖像的絕對位置

我試圖（沒有成功）設置div內的一個小圖像的絕對位置。無論div的內容如何，圖片都應該出現在div的左側。內容是最大長度爲8個字符的文本標籤問題：圖像的位置取決於文本的長度，應該不是這樣！ demo jsfiddle 我想圖像的位置仍然是相同的，如果文字是「二」，如果該文本爲「埃裏卡」如何在div內設置圖像的絕對位置

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>

任何想法？

來源

2016-04-27 Erixx

只需設置孩子position: absolute和家長position: relative。

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>

來源

2016-04-27 12:58:03 Chris

謝謝克里斯，它工作正常。 – Erixx

@Erixx很高興能幫到你！ :)請考慮標記答案爲接受，如果它幫助你。 – Chris

請更新您的答案，相對於父母的位置和孩子的絕對位置。 – KrisD

您的<img>是相對定位的，這意味着它將根據它在做什麼之前的元素來確定它的位置。爲了您需要添加位置的圖像進行絕對定位：絕對您icon_suppr類

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

來源

2016-04-27 12:57:52 elmarko

如果你想設置圖像的另一個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; 
    }

來源

2016-04-27 12:58:06

是的，它的工作原理;感謝Lunin！ – Erixx

添加position: relative到.TAG，但position: absolute到.icon_suppr

Result

來源

2016-04-27 12:58:28

謝謝安德烈 – Erixx

如何在div內設置圖像的絕對位置

回答

相關問題