vue-position定位

在开发中经常会遇到当父级元素设置了margin-top,子级元素再设置margin-top时，
如果子元素的值小于父元素的值，则子元素设置的margin-top没有效果；如果子元素的值大于父元素的值，则父子元素一起向下移动；那下面就来解决这个问题：

 <!-- 1.absolute：绝对定位；
脱离原来的位置进行定位，
相对于最近的有定位属性的父级元素进行定位，如果没有就相对于文档进行定位 -->

<!-- 2.relative：相对定位；
保留原来位置进行定位，
相对于出生(原始)的位置进行定位 -->

<!-- 3.fixed：固定定位;
相对于屏幕固定在某个位置，当屏幕滚动时该视图跟随不动 -->

<!-- 解决margin塌陷的问题
一：问题描述：当父级元素设置了margin-top,子级元素再设置margin-top时，
如果子元素的值小于父元素的值，则子元素设置的margin-top没有效果；
如果子元素的值大于父元素的值，则父子元素一起向下移动； -->
<!-- 解决方法：BFC： block format content -->
<!-- 如何触发一个盒子的bfc：
1.position:basolute;
2.display: inline-block;
3.float: left/right;
4.overflow: hidden; 
4个方法都可以，具体使用哪一个，看具体情况 -->
<div class="father">
    <div class="son"></div>
</div>

.father{
    margin-left: 100px;
    margin-top: 100px;
    width: 100px;
    height: 100px;
    background-color: aqua;
    overflow: hidden;
    /* display: inline-block; */
    /* float: left; */
    /* position: absolute; */
}
.son{
    margin-left: 50px;
    margin-top: 50px;
    width: 50px;
    height: 50px;
    background-color: red;
}