爲什麼內嵌塊位置：相對忽略頂部偏移量的百分比？

我被困在試圖弄清楚，爲什麼如果我相對定位內嵌塊選擇元素，因爲它是下面的結構，它忽略了百分比的頂部偏移屬性（在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如何忽略它。不知道。 –

爲什麼內嵌塊位置：相對忽略頂部偏移量的百分比？

回答

相關問題