Почему позиция встроенного блока: относительное игнорирование верхнего смещения в процентах?

Я застреваю, пытаясь понять, почему, если я относительно позиционирую элемент select inline-block, как он структурирован ниже, он игнорирует свойство верхнего смещения в процентах (в 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>

источник

2016-05-23 C.Pr

Кажется, что top: 10% на inline-block

работ на Firefox
игнорируется на Chrome
на IE, процент решается при загрузке страницы , но изменение размера окна не обновляет его.

Я не думаю, что с 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>

источник

2016-05-23 18:31:58 Oriol

Спасибо! Интересно, как Chrome игнорирует это. Не знал. –

Почему позиция встроенного блока: относительное игнорирование верхнего смещения в процентах?

ответ

Смежные вопросы