使用MUI弹出框（popover）被遮罩层盖住

这几天使用MUI写一个商城APP，在使用弹出框时，出现了问题，问题是这样的，上图：

弹出框是出来了，只是出现在遮罩层的下方，这就让人摸不着头脑了

下面给大家看看我的代码：

<div class="block-group">
	<div class="block-row block-attr mui-clearfix">
		<label class="block-attr__title">商品库存</label>
		<div class="block-attr__body">
			{{Goods.inventory}}件剩余
		</div>
	</div>
	<div class="block-row block-attr mui-clearfix">
		<label class="block-attr__title">产品型号</label>
		<div class="block-attr__body">
			{{Goods.GoodsModel}}
		</div>
	</div>
	<div class="block-row block-attr mui-clearfix">
		<label class="block-attr__title">产品规格</label>
		<div class="block-attr__body">
			{{Goods.GoodsUnitTemplateDes}}
		</div>
	</div>
	<div class="block-row block-attr mui-clearfix">
		<label class="block-attr__title">参数</label>
		<div class="block-attr__body">
			<a href="#popover" id="openPopover" class="">打开弹出菜单</a>
		</div>
	</div>
</div>
<div id="popover" class="mui-popover mui-popover-action mui-popover-                    
                                             bottom fr-tc">
	<div class="fr-div-w">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell"><a href="#">Item1</a></li>
			<li class="mui-table-view-cell"><a href="#">Item2</a></li>
			<li class="mui-table-view-cell"><a href="#">Item3</a></li>
			<li class="mui-table-view-cell"><a href="#">Item4</a></li>
			<li class="mui-table-view-cell"><a href="#">Item5</a></li>
		</ul>
	</div>
</div>

我看着也没啥问题啊，然后我怀疑是CSS的锅，在查看了之后发现也没啥问题，遮罩层的‘z-index’为998，弹出框的为999，明显不是这个原因，找了很久，眼睛都花了。一直无法解决。当我想要放弃时突然想到一点，遮罩层遮的是哪？遮的是content啊，如图：<div id="popover" class="mui-popover">被放到了里面，只要把 <div id="popover" class="mui-popover">拿到<div class = "mui-content">的外面就可以了

于是我把弹出框位置改动，放在mui-content的外部，结果真的解决了