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;

}

得到的结果

bVECeE?w=580&h=645

z2:

bVECeV?w=275&h=188

z4:

bVECe4?w=273&h=199

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

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

更新浏览器版本后:

bVECGV?w=273&h=225