先寫一個簡單的實例：

定位 h2 元素：

h2 { position:absolute; left:100px; top:150px; }

親自試一試

關于定位

我們可以使用css的position屬性來設置元素定位類型，position的設置項如下：

a、relative生成相對定位元素，元素所占據的文檔流的位置不變（即元素不會脫離文檔流），元素本身相對文檔流的位置進行偏移。（相對于自身的位置定位）

b、absolute生成絕對定位元素，元素脫離文檔流，不占據文檔流的位置，（元素會漂流我在文檔流的上方），相對于上一個設置了相對定位或者絕對定位或者固定定位的父級元素來進行定位，如果找不到，則相對于body元素進行定位。（做絕對定位時一般會把父級元素設置為相對定位，把父級元素作為基點）

c、fixed生成固定定位元素，元素脫離文檔流，不占據文檔流的位置，相對于瀏覽器窗口進行定位。

d、html' target='_blank'>static默認值，沒有定位，元素出現在正常的文檔流中，相對于取消定位屬性或者不設置定位屬性。

e、inherit從父級元素繼承position屬性值。

定位元素特性

絕對定位和固定定位的塊元素和行內元素會自動轉化為行內塊元素。（行內塊元素不能使用margin:x auto來設置水平居中）

a、如果要使元素水平居中：left:50%;margin-left:-width/2

b、如果要使元素垂直居中：top:50%;margin-top:-height/2

定位元素的層級

定位元素是浮動的正常的文檔流之上，可以用z-index屬性來設置元素的層級。（z-index值越大，層級越高）

典型定位布局：

a、固定在頂部的菜單

b、水平垂直居中的彈框

c、固定的側邊的工具欄

d、固定在底部的按鈕

a、固定在頂部的菜單（固定定位）

b、水平垂直居中的彈框（固定定位+絕對定位）

c、固定的側邊的工具欄（固定定位）

d、固定在底部的按鈕（固定定位）

以上就是css中定位position的詳細介紹的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。