如何在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内设置图像的绝对位置

回答

相关问题