◆ position:absolute; は親の relative 要素の border の内側が基準

position:absolute; にすると 親を辿ったどこかにある relative な要素が基準になりますよね

top や right などを指定した時に relative な要素のどこかが基準になるか ですが border より内側です
padding 分は無視されます

abs-border

Chrome でよく見るボックス表示で書いてみるとこんな感じです
top:0;left:0; では赤色の四角の位置になります
border の内側です

青色の場所にしたい場合は この例だと border が 10px なので
left:-10px;top:-10px; と自分で指定しないといけないです

<style>
*{
    box-sizing:border-box;
}
.outer{
    position:relative;
    border:10px solid burlywood;
    width:300px;
    height:300px;
    padding:20px;
    background:mistyrose;
    background-clip:content-box;
}
.std{
    width:100px;
    height:100px;
    border:2px solid darkmagenta;
}
.abs{
    width:100px;
    height:100px;
    border:2px solid tomato;
    position:absolute;
    top:0;
    left:0;
}
</style>
<div class="outer">
<div class="std"></div>
<div class="abs"></div>
</div>