Question

我有两个div，一个position:static和一个position:absolute。尽管具有相同的宽度和填充值，但绝对定位的div的宽度约为17px。仅当我将水平填充指定为百分比时才会发生这种情况。如何在不删除％padding的情况下将这些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%;
}

我只是不确定为什么会发生这种情况。它可能与绝对定位元素有关，不共享相同的包含元素（body vs html），这就是使用百分比的填充基于。

Answer 2

你面临的问题实际上是一个非常普遍的问题：身体上的默认边距。

通过为margin: 0;添加body，问题就解决了。 padding: 20px 20%;对元素的行为不同的原因是因为百分比值基于父元素的宽度 - 对于静态定位元素，这会减少默认边距。但是，对于绝对定位的元素，将忽略正文上的此边距（html而不是body被视为其父级，它没有边距）并且20％将是更大的数字。

这也是为什么你必须使用top:96px;而不是top:88px（填充中为40px +边框中为8px）的绝对定位元素 - 默认边距按下前两个元素。< / p>

这是您的代码，相应调整：

body {
  margin: 0;
}
.foo {
  border: 2px solid blue;
  background: pink;
  width: 200px;
  padding: 20px 20%;
}
.foo:nth-child(3) {
  border-color: red;
  position: absolute;
  top: 88px;
}

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

Answer 3

那是因为百分比是相对于containing block而言的，这在绝对情况下会有所不同。

对于in-flow元素，包含块由body元素建立，默认情况下具有一些边距，因此它比视口窄。

对于绝对定位的元素，包含块由最近的定位祖先建立。由于没有任何东西，它是initial containing block，由视口建立。

解决方案是定位body，以便为绝对定位的元素建立包含块：

body {
  position: relative;
}

body {
  position: relative; /* Establish the containing block for absolutely positioned descendants */
}
.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>

填充时绝对定位的div太宽：％

3 个答案: