为什么父元素设置relative，子元素为absolute,定位却根据body（body没有设置position）

<div class="login">

 <div class="log-input">

  <input type="text" name=""><label>邮箱/手机号/用户名</label>

  <input type="password" name=""><label>请输入密码</label>

 <div>

 <div>

  <i class="square"></i>

  <span class="next">下次自动登录</span>

  <a href="" class="forget">忘记密码?</a>

 </div>

 <div>

  <i class="entry"></i>

  <i class="register"></i>

 </div>

</div>

.login {
 background: #ebf3fa; 
 width: 250px;
 height: 350px;
 border: 1px solid #bbb;
}
.log-input {
 width: 200px;
 margin:0 auto; 
 }
.log-input input{
 width: 200px;
 height: 30px;
    margin:5px 0;
    position: relative; 
}
.log-input label {
  color: red;
  position: absolute;
  top: 20px;
  z-index: 10;
}
.next {
 font-size: 14px;
}

top:20px;不是根据input 来定位的