html - 填充时绝对定位的div太宽 : %

Question

我有两个 div，一个 position:static 和一个 position:absolute。尽管具有相同的宽度和填充值，但绝对定位的 div 的宽度增加了大约 17px。只有当我将水平填充指定为百分比时才会发生这种情况。如何在不移除 % 填充的情况下使这些 div 具有相同的宽度？

.foo { 
  border:2px solid blue; 
  background: pink; 
  width: 200px; 
  padding: 20px 20%; 
}

.foo:nth-child(3) { 
  border-color: red; 
  position:absolute; 
  top:96px; 
}

<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>

Answer 1

我知道如何解决这个问题:

body {
  width: 100%;
}

我只是不能 100% 确定为什么会这样。它可能与绝对定位元素不共享相同的包含元素(body vs html)有关，这就是使用百分比的填充的基础。