设置position:absolute后，未脱离文档流

Question

设置position:absolute后，未脱离文档流，导致写导航下拉菜单时，下拉内容无法完全展开

以下为导航上触发下拉内容的菜单和下拉框的html

<div class="user login user-login right">
      <img class="userPic" src="../../image/icon/favicon_s.png" alt="">
      <div class="user-menu">
        <ul class="menu-ul clearfix">
          <li class="menu-li">My home page</li>
          <li class="menu-li">Set up</li>
          <li class="menu-li">Log out</li>
        </ul>
      </div>
    </div>

.user-login{
    //width:24px;
    //height:24px;
    display:block;
    position:relative;
    z-index: 10;
    &:hover{
      .user-menu{
        display:block;
      }
    }
    .userPic{
      width:24px;
      height:24px;
      margin-top:20px;
      border-radius: 5px;
      cursor:pointer;
    }
    .user-menu{
      display:none;
      position:absolute;
      left:0;
      top:0;
      width:158px;
      height:130px;
      z-index: 20;
      background-color:#111;
    }
  }

下图分别为鼠标悬浮的触发元素和触发后的效果。正常情况下，触发后的黑色下拉框应该脱离文档流，完整呈现出来，而不是局限在了父元素中。有网友直接复制我的代码进行了测试，是正常的。不知道和我用了webpack的模板进入的导航是否有关，<%= require('html-loader!./layout/nav.html') %>

下图是chrmoe控制台中的部分样式

Answer 1

找到原因了，因为我给根元素设置了overflow:hidden;导致display:absolute脱离了文档流后，被溢出截取了

Answer 2

要不你就给ul设置width和height，要不你就给li设置width、height，ul不是块元素

Answer 3

你这个内容都没有换行，看起来像是被hidden掉的

Answer 4

nav都被撑高了，绝对定位是相当于相对定位的，如果在这个绝对定位的元素上级没有设置过relative的元素，则以html为参考。