-
position
（定位元素）
鎖定
- 外文名
- position
- 作 用
- 指定元素在文檔中的定位方式
- position版本
- CSS2
- 兼容性
- IE4+ NS4+
position定位類型
- 定位元素（positioned element）是其計算後位置屬性為relative,absolute,fixed或sticky的一個元素。
- 相對定位元素（relatively positioned element）是計算後位置屬性為relative的元素。
- 絕對定位元素（absolutely positioned element）是計算後位置屬性為absolute或fixed的元素。
- 粘性定位元素（stickily positioned element）是計算後位置屬性為sticky的元素。
大多數情況下，height和width被設定為auto的絕對定位元素，按其內容大小調整尺寸。但是，被絕對定位的元素可以通過指定top和bottom，保留height未指定（即auto），來填充可用的垂直空間。它們同樣可以通過指定left和right並將width指定為auto來填充可用的水平空間。
除了剛剛描述的情況（絕對定位元素填充可用空間）：
- 如果top和bottom都被指定（嚴格來説，這裏指定的值不能為auto），top優先。
position語法
position屬性被指定為從下面的值列表中選擇的單個關鍵字。
position取值
- static
- 該關鍵字指定元素使用正常的佈局行為，即元素在文檔常規流中當前的佈局位置。此時top,right,bottom,left和z-index屬性無效。
- relative
- 該關鍵字下，元素先放置在未添加定位時的位置，再在不改變頁面佈局的前提下調整元素位置（因此會在此元素未添加定位時所在位置留下空白）。position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素無效。
- absolute
- 不為元素預留空間，通過指定元素相對於最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設置外邊距（margins），且不會與其他邊距合併。
- fixed
- 不為元素預留空間，而是通過指定元素相對於屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現在的每頁的固定位置。fixed屬性會創建新的層疊上下文。當元素祖先的transform 屬性非none時，容器由視口改為該祖先。
- sticky
- 盒位置根據正常流計算(這稱為正常流動中的位置)，然後相對於該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。在所有情況下（即便被定位元素為table 時），該元素定位均不對後續元素造成影響。當元素 B 被粘性定位時，後續元素的位置仍按照B 未定位時的位置來確定。position: sticky對table元素的效果與position: relative相同。
position常見語法
static | relative | absolute | sticky | fixed
position示例
position相對定位
相對定位的元素是在文檔中的正常位置偏移給定的值，但是不影響其他元素的偏移。下面的例子中，注意未應用定位的其它元素是按照 "Two"在正常位置的情況下進行佈局的。
HTML 內容
<div class="box" id="one">One</div> <div class="box" id="two">Two</div> <div class="box" id="three">Three</div> <div class="box" id="four">Four</div>
CSS
.box { display: inline-block; width: 100px; height: 100px; background: red; color: white;}#two { position: relative; top: 20px; left: 20px; background: blue;}
position絕對定位節
相對定位的元素並未脱離文檔流，而絕對定位的元素則脱離了文檔流。在佈置文檔流中其它元素時，絕對定位元素不佔據空間。絕對定位元素相對於最近的非static祖先元素定位。當這樣的祖先元素不存在時，則相對於ICB（inital container block, 初始包含塊）。
HTML 內容
<div class="box" id="one">One</div> <div class="box" id="two">Two</div> <div class="box" id="three">Three</div> <div class="box" id="four">Four</div>
CSS
.box { display: inline-block; background: red; width: 100px; height: 100px; float: left; margin: 20px; color: white; }#three { position: absolute; top: 20px; left: 20px;
}
position固定定位
固定定位與絕對定位相似，但元素的包含塊為 viewport 視口。該定位方式常用於創建在滾動屏幕時仍固定在相同位置的元素。在下面的示例中，"One" 元素定位在離頁面頂部 80px，離頁面左側 20px 的位置。
HTML 內容
<div class="outer"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. </p> <div class="box" id="one">One</div> </div>
CSS 內容
.box { background: red; width: 100px; height: 100px; margin: 20px; color: white;}#one { position: fixed; top: 80px; left: 10px;}.outer { width: 500px; height: 300px; overflow: scroll; padding-left: 150px;
}
當瀏覽頁面頂部時，定位元素處於左上角。在滾動後，它相對於 viewport 視口仍處於同一位置。
position粘性定位
粘性定位可以被認為是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位，之後為固定定位。例如：
#one { position: sticky; top: 10px; }
在 viewport 視口滾動到元素 top 距離小於 10px 之前，元素為相對定位。之後，元素將固定在與頂部距離 10px 的位置，直到 viewport 視口回滾到閾值以下。
粘性定位常用於定位字母列表的頭部元素。標示B 部分開始的頭部元素在滾動A 部分時，始終處於 A 的下方。而在開始滾動B 部分時，B 的頭部會固定在屏幕頂部，直到所有 B 的項均完成滾動後，才被 C 的頭部替代。
HTML 內容
<div> <dl> <dt>A</dt> <dd>Andrew W.K.</dd> <dd>Apparat</dd> <dd>Arcade Fire</dd> <dd>At The Drive-In</dd> <dd>Aziz Ansari</dd> </dl> <dl> <dt>C</dt> <dd>Chromeo</dd> <dd>Common</dd> <dd>Converge</dd> <dd>Crystal Castles</dd> <dd>Cursive</dd> </dl> <dl> <dt>E</dt> <dd>Explosions In The Sky</dd> </dl> <dl> <dt>T</dt> <dd>Ted Leo & The Pharmacists</dd> <dd>T-Pain</dd> <dd>Thrice</dd> <dd>TV On The Radio</dd> <dd>Two Gallants</dd> </dl></div>
CSS
* { box-sizing: border-box;}dl { margin: 0; padding: 24px 0 0 0;}dt { background: #B8C1C8; border-bottom: 1px solid #989EA4; border-top: 1px solid #717D85; color: #FFF; font: bold 18px/21px Helvetica, Arial, sans-serif; margin: 0; padding: 2px 0 0 12px; position: -webkit-sticky; position: sticky; top: -1px;}dd { font: bold 20px/45px Helvetica, Arial, sans-serif; margin: 0; padding: 0 0 0 12px; white-space: nowrap;}dd + dd { border-top: 1px solid #CCC}
