舊版 CSS 彈性方塊版面配置規格為絕對定位子項設定的靜態位置,正如其大小為 0 x 0 像素的彈性項目。最新版規格會完全用盡流程,並根據校正及合理化屬性設定靜態位置。在撰寫本文時,電腦版和 Android 版的 Edge 和 Opera 39 已支援這項功能。
例如,讓我們將特定定位行為套用至下列 HTML。
<div class="container">
<div>
<p>In Chrome 52 and later, the green box should be centered vertically and horizontally in the red box.</p>
</div>
</div>
我們將新增類似下方的內容:
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container > * {
position: absolute;
}
在 Chrome 52 以上版本中,巢狀 <div>
會直接在容器 <div>
中置中顯示。
在不相容的瀏覽器中,綠色方塊的左上角會顯示在紅色方塊的正上方。