制作可复用轮播组件

最初页面上只有轮播组件

   <carousel>（相对于body进行固定定位fixed）

   </carousel>

现希望实现的功能时在轮播组件上加一个关闭按钮，对于轮播组件的显示进行控制

现将结构修改为：

<div class="container">

<i class="el-icon-arrow-right button-close" v-on:click="closeCarousel"></i>

  <carousel>（相对于body进行固定定位）

   </carousel>

</div>

现希望将container进行相对定位，对按钮进行绝对定位，但是在浏览器中审查元素发现外部的container容器高度塌陷

如何解决这个问题，将外层container进行fixed定位，将垂直居中布局（top:50%；left：50%；transform:(-50%,-50%)）;

将按钮position设置为absolute,这样就可以实现将按钮相对于父元素进行定位