positon:absolute の端の基準
◆ position:absolute; は親の relative 要素の border の内側が基準
position:absolute; にすると 親を辿ったどこかにある relative な要素が基準になりますよね
top や right などを指定した時に relative な要素のどこかが基準になるか ですが border より内側です
padding 分は無視されます
Chrome でよく見るボックス表示で書いてみるとこんな感じです
top:0;left:0; では赤色の四角の位置になります
border の内側です
青色の場所にしたい場合は この例だと border が 10px なので
left:-10px;top:-10px; と自分で指定しないといけないです
↓
top や right などを指定した時に relative な要素のどこかが基準になるか ですが border より内側です
padding 分は無視されます
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>
*{
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>
↓