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

得到的结果

z2:

z4:

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

---

更新：最后z4的显示的图有问题
更新浏览器版本后：

解决方案

首先top（bottom）、 left（right）的百分比的相对值分别是相对于包含块的高度、宽度的。

然后看结果，对于position:relative的元素而言，百分比的计算是相对于其包含块的内容盒（框）的宽高的，所以对于第一个就很好理解，宽高都是400所以值也就是400了；对于第二张图，absolute的元素百分比的计算是相对于其包含块的padding边界所形成的盒（框）来计算的，所以结果呢就是top 410(400 + 5 + 5) left 420(400 + 10 + 10)的，楼主的关于z4的图的left的计算值还是有误的，估计是doctype之类的问题，或者没及时更新（猜测。。）

http://blog.aijc.net/css/2014...

这篇关于css - position定位，设置top为百分数，如何计算？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！