css top 定位百分比,position定位，设置top为百分数，如何计算？

position定位分别设置为relative,absolute。top,left都设置为100%,理论上说100%应该根据包含快的宽度计算，但实际上的计算值却不同。

html

css

.z1{

position: relative;

width: 400px;

height: 400px;

padding: 5px 10px;

color: #fff;

text-align: right;

background: #000;

border: 5px solid yellow;

}

.z2{

position: relative;

width: 200px;

height: 100px;

padding: 5px 10px;

color: #fff;

text-align: right;

z-index: 2;

top: 100%;

left: 100%;

background: #C00;

border: 5px solid blue;

}

.z3{

position: relative;

width: 400px;

height: 400px;

padding: 5px 10px;

color: #fff;

text-align: right;

background: #000;

border: 5px solid yellow;

}

.z4{

position: absolute;

width: 200px;

height: 100px;

padding: 5px 10px;

color: #fff;

text-align: right;

z-index: 2;

top: 100%;

left: 100%;

background: #C00;

border: 5px solid blue;

}

得到的结果

z2:

z4:

且Z4 的top,left均设置为100%，计算值却不同，求解答！！！

更新：最后z4的显示的图有问题

更新浏览器版本后：