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

原文：https://blog.csdn.net/Efficiency9/article/details/72630347

.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;
        }

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

 父元素没有relative:

 父元素有relative: