优艾设计网

position定位,设置top为百分数,如何计算??

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

html <div class="z1"> <div class="z2"></div> </div> <div class="z3"> <div class="z4"></div> </div>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 blu优艾设计网_平面设计e; }

得到的结果

z2:

z4:


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


360U2552427075 13分钟前

优艾设计网_Photoshop论坛

relative 是相对原来位置的(包括 padding ),absolute 是相对最近的 带有定位的 父节点的左上角(不包括padding), 而top/left 100% 都是包括 padding 的。。


0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜