在我們瀏覽網頁的過程中，經常會發現網頁中的元素重疊展示，例如乙個列表壓在了一張之上，或者瀏覽器右下角突然彈出的廣告壓到了其他元素之上，這些都需要使用css的定位才能實現，現在我們就講解css定位相關的屬性，定位可以分為三類，
我們可以通過position屬性，將乙個元素設定成定位元素，之後就可以通過top、left、bottom、right屬性來設定元素的座標。
絕對定位是相對於元素最近的已定位的祖先元素（即是設定了絕對定位或者相對定位的祖先元素）。如果元素沒有已定位的祖先元素，那麼它的位置則是相對於最初的包含塊（body）。
將乙個元素設定下面的屬性：
**如下（示例）：
<
!doctype html>
"en"
>
"utf-8"
>
document<
/title>
.box
.pos
<
/style>
<
/head>
<
!-- 乙個元素可以設定多個class屬性，用空格區分開 --
>
"box"
>
1<
/div>
"box pos"
>
2<
/div>
"box"
>
3<
/div>
<
/body>
<
/html>
**如下（示例）：
<
!doctype html>
"en"
>
"utf-8"
>
document<
/title>
.box
.pos
<
/style>
<
/head>
"box"
>
1<
/div>
"box pos"
>
2<
/div>
"box"
>
3<
/div>
<
/body>
<
/html>
相對於瀏覽器視窗進行定位，脫離原來的文件流
**如下（示例）：
<
!doctype html>
"en"
>
"utf-8"
>
document<
/title>
body
.box
.box2
<
/style>
<
/head>
"box box1"
>
1<
/div>
"box box2"
>
2<
/div>
"box box3"
>
3<
/div>
<
/body>
<
/html>
理解了上面三種定位方法，我們再來考慮開始提到的那個問題，如果我們希望將乙個數字列表壓在一張之上。居中顯示在網頁之上，我們將數字列表設定定位之後，座標應該設定成多少呢？因為居中的與瀏覽器視窗的左邊距是不固定的，所以沒有辦法設定成乙個固定值，這個時候，我們就需要給定位元素設定參照物。
將父級元素設定定位元素，那麼子級元素定位的座標原點會設定為父級元素左上角的位置。**如下所示。
**如下（示例）：
"container"
>
"box"
>
<
/div>
<
/div>
.container
.box
css 定位連線 css絕對定位
定位的四種模式 static,relative,absolute,fixed 定位的四個位置 left,right,top,bottom 定位屬性 position,有四種狀態值 1.static 靜態定位,按元素在文件流中的順序排列,這是預設值,四個位置無效 2.relative 相對定位,元素相...
CSS定位 浮動定位
css定位機制 浮動定位 float屬性 進行浮動定位 left，right clear屬性 清除浮動 left，right，both float屬性 1.概述 div實現橫向多列布局 float屬性 left 左浮動 right 右浮動 none 不浮動 下圖為 的實現 float屬性用途 在 混...
css的相對定位 絕對定位
相對定位 relative 絕對定位 absolute 相對定位 relative 相對於原來位置移動，元素設定此屬性之後仍然處在文件流中，不影響其他元素的布局 絕對定位 absolute 1.在父元素沒有設定相對定位或絕對定位的情況下，元素相對於根元素定位 即html元素 是父元素沒有 2.父元素...