position定位，設(shè)置top為百分?jǐn)?shù)，如何計算？

科技 未結(jié) 1 1683
360U3064381394
360U3064381394 2023-04-10 05:57

position定位分別設(shè)置為relative,absolute。top,left都設(shè)置為100%,理論上說100%應(yīng)該根據(jù)包含快的寬度計算，但實際上的計算值卻不同。

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 blue; }

得到的結(jié)果

z2:

z4:


且Z4 的top,left均設(shè)置為100%，計算值卻不同，求解答?。?！

1條回答
  • 360U2552427075
    2023-04-10 07:00

    relative 是相對原來位置的(包括 padding )，absolute 是相對最近的 帶有定位的 父節(jié)點的左上角(不包括padding)， 而top/left 100% 都是包括 padding 的。。

    0 討論(0)
提交回復(fù)