Html 请解释以下行为

我已经给了父相对和子绝对的位置，但是子元素图标没有安装在给定的父元素中，它正在脱离父元素。有人能解释一下这种行为吗

该图标应始终位于文本的右侧和顶部

如果低于断点{@media min width:320px和max width:640px}，则文本应位于左侧，图标应位于文本旁边。如果文本为两行，则图标应再次位于右上角。请帮帮我

<div id="main">
        <div class="left">
            <div class="leftwrapper"> <span>*</span>
     <span>hello this is label may be two line</span>

                <div class="leftIcon"><img src="https://wiki.jenkins-ci.org/download/attachments/42469250/info.gif?version=1&modificationDate=1264477127000"/></div>
            </div>
        </div>
        <div class="right">
            <input type="text" />
        </div>
    </div>

以下是您应该使用的

：

top: 0;
right: 0;

---

而不是左：100%。使用left 100%表示它将在div之后100%开始。

您的元素定位错误。不要使用left:100%；，但对：10px；或者类似的。同时设置顶部或底部

看看小提琴：

---

我还做了一些其他的小改进

您希望我的图标以所有分辨率显示在文本旁边吗？是的。它应该始终位于右上角。只需右上角：0；排名：0；对于.leftIcon类，无需使用left:100%coz right:0，但它将固定在顶部，需要与文本第一行对齐，如果文本超过两行，即使在调整大小窗口中也需要与文本相邻。绝对定位可能不是最佳方法。如果文本是多行的，这可能更接近您想要实现的效果。它看起来是这样的：如果文本较少，当我调整窗口大小时，左图标应该位于文本旁边。这里有一个问题，当响应中的文本较少时：我不确定你想要实现什么，但看看下一个提琴：但图标总是与第一行的文本对齐，即使文本分为两行，此外，调整窗口大小图标也应始终位于文本旁边。如果希望图标与文本对齐，请使用浮动或显示：内联块，而不是位置：绝对

top: 0;
right: 0;

.leftIcon {
  position:absolute;
  top: 10px;
  right:10px;
}