CSS 之 position詳解

時間 2019-12-14

標籤 css position 詳解欄目 CSS 简体版

原文原文鏈接

position 有五個值：static、relative、absolute、fixed、inherit。html

static

是默認值。就是按正常的佈局流從上到下從左到右佈局，日常咱們作網頁時，沒有指定 position，也就表示使用 static。web

relative

沒有脫離佈局流，此時能夠使用 top、right、bottom、left 屬性。瀏覽器

top 和 bottom 共存時，使用 top 值，忽略 bottom 值；
left 和 right 共存時，使用 left 值，忽略 right 值；

relative 是相對位置，指相對於元素的 position 爲 static 時的位置：ide

top 相對於 static 下移多少像素（若 top 是負值，則上移）。
right 相對於 static 左移多少像素（若 right 是負值，則右移）。
bottom 相對於 static 上移多少像素（若 bottom 是負值，則下移）。
left 相對於 static 右移多少像素（若 left 是負值，則左移）。

使用 relative 以後：佈局

原來的空間不會被其餘元素擠佔。
元素在最終位置時也不會擠佔其餘元素的空間，它浮動到其它元素的上方。

absolute

脫離佈局流，此時能夠使用 top、right、bottom、left，但這些屬性再也不是相對於 static 時的位置，而是相對於 containing block 的，相對於其邊框內邊緣的，而不是其 padding 內邊緣。也就是相對於最近的 position不是static的塊級祖先元素盒子進行定位。flex

使用 absolute 以後：spa

原來的空間會被其餘元素擠佔。
元素在最終位置時也不會擠佔其餘元素的空間，它浮動到其它元素的上方。

fixed

它的模式與 absolute 相同，不過不管怎麼拖動滾動條，它始終固定在屏幕的指定位置。在 IE6 中不支持這個屬性；在 IE7 中支持這個屬性但須要指明 DOCTYPE；Firefox 等瀏覽器支持這個屬性。code

top、right、bottom、left 屬性指相對於視口的。orm

inherit

繼續父元素的 position 值。htm

如何肯定包含塊：

肯定包含塊的過程徹底依賴於這個包含塊的 position 屬性：

若是 position 屬性是 static 或 relative 的話，包含塊就是由它的最近的祖先塊元素（好比說inline-block, block 或 list-item元素）或格式化上下文(好比說 a table container, flex container, grid container, or the block container itself)的內容區的邊緣組成的。
若是 position 屬性是 absolute 的話，包含塊就是由它的最近的 position 的值不是 static （fixed, absolute, relative, or sticky）的祖先元素的內邊距區的邊緣組成的。
若是 position 屬性是 fixed 的話，包含塊就是由 viewport (in the case of continuous media) or the page area (in the case of paged media) 組成的。
若是 position 屬性是 absolute 或 fixed，包含塊也多是由知足如下條件的最近父級元素的內邊距區的邊緣組成的：
1. A transform or perspective value other than none
2. A will-change value of transform or perspective
3. A filter value other than none or a will-change value of filter (only works on Firefox).

注意: 根元素(<html>)所在的包含塊是一個被稱爲初始包含塊的矩形。It has the dimensions of the viewport (for continuous media) or the page area (for paged media).

由包含塊計算百分值

如上所述，若是某些屬性被賦予一個百分值的話，它的計算值是由這個元素的包含塊計算而來的。這些屬性包括盒模型屬性和偏移屬性：

height, top, bottom 這些屬性由包含塊的 height 屬性的值來計算它的百分值。若是包含塊的 height 值依賴於它的內容，且包含塊的 position 屬性的值被賦予 relative 或 static的話，這些值的計算值爲0。
width, left, right, padding, margin這些屬性由包含塊的 width 屬性的值來計算它的百分值。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。