为什么内联块 position:relative 忽略百分比的顶部偏移量？

Question

我一直在试图弄清楚为什么如果我按照下面的结构相对定位内联块 select 元素，它会忽略顶部偏移量属性的百分比（以 ems 为单位，例如，没问题）。没有 p 标签，偏移量 % 有效。但是一旦 p 标签重新出现， top % 就不起作用了。谢谢。

html, body {
  height: 100%;
}
select {
  position: relative;
  top: 10%;
}

<body>
  <p>some text</p>
  <select>
    <option>apples</option>
  </select>
  <p>some text</p>
</body>

Answer 1

top: 10% 似乎 inline-block

适用于 Firefox
在 Chrome
在 IE 上，百分比会在页面加载时解析，但调整 window 的大小不会更新它。

我认为 top 百分比和 display: inline-block 应该没有任何问题。百分比应该能够根据包含块的高度正确解析（与边距不同，top 只设置一个偏移量，它不影响祖先，所以没有循环定义）。 containing block 不依赖于它是块级还是内联级，所以没有理由一个应该工作而另一个不工作。

作为解决方法，您可以将 select 包裹在块元素内，或将其设置为块样式：

html, body {
  height: 100%;
}
select {
  position: relative;
  top: 10%;
  display: block;
}

<p>some text</p>
<select>
  <option>apples</option>
</select>
<p>some text</p>

为什么内联块 position:relative 忽略百分比的顶部偏移量？

Why is inline-block position:relative ignoring top offset in percentage?

css

css-position

offset