子元素absolute定位时父元素有无relative的区别

1. Html

<div id="father">
    <div class="son"></div>
</div>

2.Css–父元素没有relative

.son{
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: absolute;
            top: 10px;
            left: 10px;
        }

3.Css–父元素有relative

.father{
            width: 200px;
            height: 200px;
            background-color: red;
            margin:0 auto;
            /*position: relative;*/
        }
        .son{
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: absolute;
            top: 10px;
            left: 10px;
        }