使用position: absolute;做蒙版，超出页面部分无法覆盖，请问怎么解决

Question

<div class="friend-list-rooter">
 <div class="friend-list-container">
 </div></div>

.friend-list-rooter {
    display: none;
 display: block;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.5);
 position: absolute;
 top: 0;
 z-index: 100;
}

.friend-list-container {
    width: 300px;
 height: 500px;
 background: #0AAEB3;
 position: absolute;
 left: 50%;
 top: 50%;
 margin-left: -150px;
 margin-top: -100px;
}

Answer 1

.friend-list-rooter {
  position: fixed;
  width: 100vw;
  height: 100vh;
}

Answer 2

overflow:hidden; 让他超出去不显示

Answer 3

超出页面不能覆盖是没问题的。

出现遮罩还能滚动页面是错的。