如果父级视觉上没有包含子元素，absolute相对于父级定位

 红色箭头处是父级部分，蓝色框处是子元素部分

 

  父元素代码 
 
  .header{
      position:relative;
      height:44px;
      background: #333;
      text-align:center;
      color:#fff;
      z-index:10;
    }
   .header-title{
      font-size:18px;
      line-height:44px;
    }

可以看到父级在视觉上，并没有包含子级。如果要对子元素进行 absolute 定位，它的 right 是相对于父级的最右边，top 的话是相对于 父级的上边而不是 下边。如果是下边的话子元素的 top 值就不是54px了，而是10px。

子元素代码

.header .popup-ctn {
    background: #373738;
    width: 130px;
    position: absolute;
    top: 54px;
    right: 6px;
    border-radius: 2px;
}

html结构