在CSS中，每个盒子都有它的包含块，包含块决定了盒子的活动范围。
绝大部分情况下，盒子的包含块为其父元素的内容盒；
绝对定位元素的包含块是其祖先元素的第一个定位元素的填充盒，若找不到则它的包含块为整个网页(初始化包含块)；
固定定位的包含块为视口(浏览器的可视窗口)，或者是设置了fransform属性的父元素。
也就是说，当父元素设置了transform时，我本来想相对浏览器固定定位的子元素，就相对于父元素进行定位了。
这样可能不是我想要的结果，如果我既要保留父元素的transform属性，又要子元素相对于浏览器窗口定位的话，我该怎么办呢？
我最好的方式就是把子元素移出该父元素，直接放到body里。
在以下三种常见的开发场景中，我将这样做：
- 在原生html层面，可以使用document.body.appendChild()的方式手动移动 DOM 节点。
- 在vue框架中，可以使用
<Teleport>传输组件将 DOM 节点物理移动到 body 下，但逻辑上仍属于当前父元素。 - 在ElementUI中，可以使用append-to-body属性控制自身是否插入至 body 元素上，它的底层是使用
<Teleport>。
总结
这个css原理会影响后到后面vue框架中对Teleport内置组件的理解。
