html - 请解释以下行为

Question

我已经给父亲戚和子绝对位置，但是子元素(图标)不适合给定的父元素，它正在脱离父元素。有人可以解释一下这种行为吗？

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

如果它低于断点 {@media (min-width:320px) and (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>

CSS

* {
  box-sizing: border-box;
}

#main {
  background: red;
  display: inline-block;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 10px;
}
#main .left {
  width: 50%;
  float: left;
}
#main .left .leftwrapper {
  width: 100%;
  padding: 10px;
  background-color: tomato;
  position: relative;
  text-align: right;
}
#main .left .leftwrapper span:first-child {
  text-align: right;
  color: #fff;
}
#main .left .leftwrapper .leftIcon {
  position: absolute;
  left: 100%;
}
#main .right {
  width: 50%;
  display: inline-block;
  background-color: #fff;
  padding: 10px;
}
#main .right input[type="text"] {
  width: 90%;
}

@media (min-width: 320px) and (max-width: 640px) {
  #main .left {
    width: 100%;
  }
  #main .left .leftwrapper {
    text-align: left;
  }
  #main .right {
    width: 100%;
  }
}

这里是 jsfiddle

Answer 1

你应该使用:

top: 0;
right: 0;

而不是 left: 100%。使用 left 100% 意味着它将在 div 之后开始 100%。