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

I'm stuck trying to figure out why if I relatively position the inline-block select element as it is structured below, it ignores the top offset property in percentage (in ems, for ex, no issue). Without the p tags, the offset % works. But once the p tags are back in, top % doesn't work. Thanks.

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

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

Solution

It seems that top: 10% on an inline-block

works on Firefox
is ignored on Chrome
on IE, the percentage is resolved when the page loads, but resizing the window doesn't update it.

I don't think there should be any problem with top percentages and display: inline-block. The percentages should be able to be resolved correctly with respect to the height of the containing block (unlike margins, top only sets an offset, it doesn't affect ancestors, so there is no circular definition). The containing block doesn't depend on whether its block-level or inline-level, so there is no reason why one should work and the other not.

As a workaround, you can wrap the select inside a block element, or style it as a block:

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

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