如何实现加载遮罩完全适配Panel面板，避免溢出？

哈哈，这个问题我之前做项目时也踩过坑！你的遮罩之所以会溢出面板主体，核心原因是绝对定位的.mask没有找到正确的定位上下文——你给.mask设了position: absolute，但它的直接父元素.panel-body没有设置position: relative，所以遮罩会默认相对于页面中最近的有定位的祖先（甚至是整个视口）来计算尺寸和位置，自然就溢出面板了。

两步就能搞定： #

• 第一步：给.panel-body加上position: relative，让它成为.mask的定位基准
• 第二步：微调.mask的样式，确保它完全贴合面板主体

修改后的完整代码： #

/* 给面板主体添加相对定位，作为遮罩的定位容器 */
.panel-body {
  position: relative;
}

.mask { 
  position: absolute; 
  background-color: rgba(102, 102, 102, 0.5); 
  width: 100%; 
  height: 100%; 
  z-index: 9999; 
  top: 0; /* 强制从容器左上角开始 */
  left: 0;
  border-radius: 3px; 
}
.mask .loading { 
  margin: 0 auto; 
  display: block; 
  background-color: #666666; 
  color: #ffffff; 
  width: 100px; 
  height: 100px; 
  padding-top: 20px; 
  padding-left: 22px; 
  border-radius: 3px; 
  /* 让加载框垂直居中，视觉效果更好 */
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<h2>Panel Mask</h2>
</div>
</div>
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<div class="panel panel-default" style="box-sizing: border-box;">
<div class="panel-body">
<div class="mask">
<span class="loading">
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>Loading...
</span>
</div>
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-md-3 control-label" for="username">名稱</label>
<div class="col-md-4">
<input name="username" id="username" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="description">備註</label>
<div class="col-md-8">
<textarea class="form-control" id="description" name="description"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<button type="button" class="btn btn-default" (click)="save()">Update</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>

额外说明： #

• 我去掉了.mask的min-height: 150px，因为如果面板内容本身比较短，这个属性会让遮罩超出面板高度，去掉后遮罩会完全贴合面板的实际高度
• 给.loading加了垂直居中的样式，这样不管面板有多高，加载提示都会在遮罩中间，体验更好

内容的提问来源于stack exchange，提问作者maru