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%。使用左100%表示它将在div之后开始100%。

Answer 2

您的元素定位错误。不要使用left: 100%;，而是right: 10px;（或类似的东西）。同时设置top或bottom。

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

查看小提琴： http://jsfiddle.net/skeurentjes/tktawmLk/1/

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

请解释以下行为

2 个答案: