Question

我正在尝试（没有成功）在div中设置一个小的近距离图像的绝对位置。无论div的内容如何，图像都应出现在div的左侧。内容是文本标签，最大长度= 8个字符问题：图像的位置取决于文本的长度，不应该是这种情况！ demo jsfiddle 如果文字是＆＃34;呃＆＃34;我想图像的位置仍然是相同的。如果文字是＆＃34; erica＆＃34;

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>

任何想法??

Answer 1

您的<img>相对定位，这意味着它将根据其前面的元素采取的位置。要绝对定位图像，您需要添加位置：绝对值icon_suppr类

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

Answer 2

只需将孩子设置为position: absolute，将父设置为position: relative。

Example

在上面的示例中，我将div放大了一点，仅用于演示。它始终是父div的top:0和left: 35px。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

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

Result

如何设置div内图像的绝对位置

4 个答案: