Detailed positioning position: relative and absolute

One, position:relative relative positioning

1, will not change the display property of the inline element

3. There is no departure from the normal flow, but a visual offset.

html element:

<div class="box">
    <div class="box2"></div>
</div>

css list:

.box{
            width:100px;
            height:200px;
            padding:20px;
            border:10px solid green;
            background-color: #F7B824;
            position:relative;
        }
        .box2{
            height:20px;
            width:200px;
            background-color: #1E9FFF;
            position:absolute;
        }

.box2 is a child of .box

When .box2 has not set the relative position: the expression is as follows:

Not sticking to the top left of the parent element as I thought it would: instead the padding value -20px is removed. The effect is the same as {position:absolute,top:20px;left:20px}

When I set the offset for .box2 --top:0,left:0; is what I expected to be close to the upper left of the parent element.

css list:

 .box{
            width:100px;
            height:200px;
            padding:20px;
            border:10px solid green;
            background-color: #F7B824;
            position:relative;
        }
        .box2{
            height:20px;
            width:200px;
            background-color: #1E9FFF;
            position:absolute;
            top:0;
            left:0;
        }