溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關css樣式布局中position屬性有什么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
position屬性：用于定義建立元素布局所用的定位類型，該屬性有多個值：
值
描述
static
默認值。沒有定位，元素出現在正常流中（忽略top,bottom,left,right或者z-index聲明）。
relative
生成相對定位的標簽，相對于標簽原來位置進行定位。因此，“left:20”會向標簽的left位置添加20像素。
absolute
生成相對定位的標簽，相對于標簽本身第一個position為非static父元素進行定位。標簽的位置通過“left”,“top”,“right”以及“bottom”樣式屬性進行規定。如果該標簽所在的父標簽均沒有設置position為非static，則相對于瀏覽器窗口進行定位，但是此時元素會隨著滾動調的滑動而滑動。
fixed
生成絕對定位的標簽，相對于瀏覽器窗口進行定位，此時元素不會隨著滾動調的滑動而滑動。元素的位置通過"left","top","right"以及"bottom"屬性進行規定。
（文檔流又稱正常流，是默認情況下HTML元素排版布局過程中元素會自動按照自上而下或從左往右進行流式排放的一種順序）
注意：任何元素都可以定位，但absolute或fixed元素會生成一個塊級框，不論該元素本身是不是塊級框。relative元素會相對于它在正常流中的默認位置偏移。IE瀏覽器都不支持"inherit"屬性值。
當一個標簽使用了positionCSS樣式屬性，如果其樣式屬性值為非static（不考慮inherit）則該標簽將脫離正常文檔流，如果又沒有指定“left”,“top”,“right”以及“bottom”樣式屬性的屬性值，則該標簽只待在原來位置，但已經脫離正常文檔流
下為演示代碼：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<style>
#z{
width:300px;
height:300px;
border:1pxsolidroyalblue;
position:relative;
}
#a,#b,#c{
width:100px;
height:100px;
}
#a{
background:red;
position:relative;
right:10px;
}
#b{
background:green;
position:fixed;
left:1000px;
bottom:20px;/*只需要規定兩個方向就可以了，上下，左右各選其一*/
}
#c{
background:yellow;
position:absolute;
left:10px;
bottom:3px;
}
</style>
</head>
<body>
<divid="z">
<divid="a"></div>
<divid="b"></div>
//加空格用于復習div的塊級元素性質
<divid="c"></div>
//加了空格后，c的div會自動換行block的屬性所致
</div>
</body>
</html>
演示注釋：
position中：
relative是相對于標簽原來的位置點進行定位的仍存在于文檔流中
fixed是相對于整個瀏覽器來定位的直接無視瀏覽器里面的標簽元素類似于“浮起來”了
absolute是相對于上一級[如.b對z]第一個（父）元素（要求為非static屬性）來定位的而且定位標準是依據父元素的外界邊框來確定的
關于“css樣式布局中position屬性有什么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
