?
This document uses PHP Chinese website manual Release
語法：
position：static | relative | absolute | fixed | center | page | sticky
默認(rèn)值：static
適用于：除display屬性定義為table-column-group | table-column之外的所有元素
繼承性：無
動畫性：否
計算值：指定值
媒體：視覺
取值：
static：對象遵循常規(guī)流。此時4個定位偏移屬性不會被應(yīng)用。
relative：對象遵循常規(guī)流，并且參照自身在常規(guī)流中的位置通過top，right，bottom，left這4個定位偏移屬性進(jìn)行偏移時不會影響常規(guī)流中的任何元素。
absolute：對象脫離常規(guī)流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規(guī)流中的任何元素，其margin不與其他任何margin折疊。
fixed：與absolute一致，但偏移定位是以窗口為參考。當(dāng)出現(xiàn)滾動條時，對象不會隨著滾動。
center：與absolute一致，但偏移定位是以定位祖先元素的中心點為參考。盒子在其包含容器垂直水平居中。（CSS3）
page：與absolute一致。元素在分頁媒體或者區(qū)域塊內(nèi)，元素的包含塊始終是初始包含塊，否則取決于每個absolute模式。（CSS3）
sticky：對象在常態(tài)時遵循常規(guī)流。它就像是relative和fixed的合體，當(dāng)在屏幕中時按常規(guī)流排版，當(dāng)卷動到屏幕外時則表現(xiàn)如fixed。該屬性的表現(xiàn)是現(xiàn)實中你見到的吸附效果。（CSS3）
* CSS3新增屬性可能存在描述錯誤及變更，僅供參考，持續(xù)更新
說明：
檢索對象的定位方式。
當(dāng)position的值為非static時，其層疊級別通過z-index屬性定義。
絕對定位的元素，在top，right，bottom，left屬性未設(shè)置時，會緊隨在其前面的兄弟元素之后，但在位置上不影響常規(guī)流中的任何元素。用這個特性你或許會干這樣的事：demo
對應(yīng)的腳本特性為position。
兼容性：
IE如果在 quirks mode下將不支持；
Firefox30.0開始支持 tr, thead, tfoot, tbody 定義 relative，F(xiàn)irefox30.0之前的版本及其它瀏覽器都只能給 table 定義 relative 用以約束內(nèi)部元素的定位；
需要定義了<meta name="viewport" content="width=device-width, user-scalable=no">才生效
示例：
實例
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>position_CSS參考手冊_web前端開發(fā)參考手冊</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
#position {
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 40px;
margin: -20px 0 0 -75px;
padding: 0 10px;
background: #eee;
line-height: 2.4;
}
</style>
</head>
<body>
<div id="position">水平垂直居中的對象</div>
</body>
</html>運(yùn)行實例 ?
點擊 "運(yùn)行實例" 按鈕查看在線實例