什麼是CSS屬性位置：中心和位置：用於的頁面？

Question

的W3這裏指定了這兩個屬性： http://www.w3.org/TR/css3-positioning/#center-pos

但我不是母語的人，找到自己的描述十分神祕。有人可以解釋這些屬性的確切含義以及它們的用途嗎？

Answer 1

從W3C規範link看來，這些是position屬性尚未實現的新「提議」值。

中心

框的位置（以及可能的大小）是與上，右，下指定，和左屬性。 該框在其包含塊（我的重點）內垂直和水平居中並且這些屬性指定關於其包含塊內的框的居中位置的偏移量。中心定位的盒子被取出正常流程。這意味着它們對後面的兄弟姐妹的佈局沒有影響。雖然位於中心位置的箱子可能有利潤率，但這些利潤率不會與其他利潤率一起坍塌。

和

頁

框的位置是根據 「絕對」 模型計算。

在尋呼媒體的情況下或者當區域框內的框的包含塊總是包含塊的初始。

否則，根據「絕對」模型確定包含塊。 與「絕對」模型一樣，箱子的邊距不會與任何其他邊距合攏。在打印介質類型的情況下，該框僅在起始頁面定位元素的初始頁面或區域上呈現。用戶代理可以分頁分頁框的內容。

Answer 2

比方說，你有一個<p class="center">元素與其父是<article>元素。

• 的p.center {position: center}規則將把<p class="center">元素在<article>元素的中心。
• <p class="center">將不會遵循正常流程：這意味着<article>元素中的任何其他元素將被<p class="center">元素中的內容覆蓋。如果您指定高於 z-index至p.center的其他元素，則會在其之上顯示其他元素，並將其隱藏在其下方的內容 之上。
• 您可以使用top，right，bottom和left屬性將<p class="center">元素從其初始中心位置偏移。

比方說，你有一個<p class="page">元素與其父是 <article>元素。

• 的p.page {position: page}規則將設置<p class="page">元素作爲<article>元件的相同的位置。
• <p class="page">將不會遵循正常流程：這意味着<article>元素中的任何其他元素將被元素中的內容覆蓋。如果您指定高於 z-index至p.page的高於其他元素的 <article>，則它將顯示在它們之上，隱藏其下面的內容 。
• 您可以使用top，right，bottom和left屬性從其初始位置偏移<p class="page">元素。